Виходячи з відповіді Майкла, я створив свою власну версію цього за допомогою jQuery. Я думаю, що це більш чистий / коротший варіант більшості відповідей тут, і, здається, вдається виконати роботу.
Я роблю те саме, що і більшість людей тут, використовуючи проліт, щоб записати вхідний текст, а потім отримати ширину. Тоді я встановлюю ширину, коли дії 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);
});
Якщо це можна покращити, будь ласка, дайте мені знати, оскільки це найчистіше рішення, яке я міг придумати.