Michael의 답변을 바탕으로 jQuery를 사용하여 나만의 버전을 만들었습니다. 나는 그것이 대부분의 대답의 더 깨끗하고 짧은 버전이라고 생각하며 일을 끝내는 것 같습니다.
나는 span을 사용하여 입력 텍스트를 작성한 다음 너비를 가져 와서 대부분의 사람들과 같은 일을하고 있습니다. 그런 다음 작업 을 호출 할 때 너비를 설정 keyup하고 blur있습니다.
작동하는 코드 펜 은 다음과 같습니다 . 이 코드 펜은 이것이 여러 입력 필드와 함께 사용되는 방법을 보여줍니다.
HTML 구조 :
<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>
jQuery :
function resizeInputs($text) {
var text = $text.val().replace(/\s+/g, ' '),
placeholder = $text.attr('placeholder'),
span = $text.next('span');
span.text(placeholder);
var width = span.width();
if(text !== '') {
span.text(text);
var width = span.width();
}
$text.css('width', width + 5);
};
위의 함수는 입력 값을 가져오고 추가 공백을 자르고 텍스트를 범위로 설정하여 너비를 얻습니다. 텍스트가 없으면 대신 자리 표시자를 가져와 스팬에 입력합니다. 텍스트가 범위에 입력되면 입력 너비를 설정합니다. + 5폭에 입력이 에지 브라우저의 작은 비트 차단됩니다 때문에이없는 것입니다.
$('.plain-field').each(function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('keyup blur', function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('blur', function() {
var $text = $(this).val().replace(/\s+/g, ' ');
$(this).val($text);
});
이것이 개선 될 수 있다면 이것이 내가 얻을 수있는 가장 깨끗한 해결책이므로 알려주십시오.