Изменить размер окна ввода для содержимого onload

Question

Попытка получить мои поля ввода [type = 'text'] для изменения размера их содержимого при загрузке страницы. Используя этот код, они эффективно изменяют размер на фокус.

$(document).ready(function() { $("input[type='text']").bind('focus', function() { $(this).attr("size", $(this).val().length); }); });

Я попытался обменивать «фокус» для различных событий, таких как «нагрузка» и «готова» безрезультатно. Имейте в виду, что я ищу что-то легкое и быстрое, что изменит размер всех полей ввода [type = 'text'] на их содержимое при загрузке страницы.

JSFIDDLE

---

Решение

Я закончил с использованием Thom's ответа, как решение, но потом я понял, что я хотел бы также, как поле ввода, чтобы расширить, как текст набран в него. Поэтому я объединил то, что у меня было до этого, и ответ Тома, чтобы обеспечить обе функции. Я также добавил css, чтобы убедиться, что он не размер страницы. Вот мой окончательный код:

HTML
<input type="text" value="resized onload and when typing"/>

JQuery
$(document).ready(function() { $("input[type='text']").each(function(index) { $(this).attr("size", $(this).val().length + 5); }); $("input[type='text']").bind('keyup', function() { $(this).attr("size", $(this).val().length + 5); }); });

CSS
input[type="text"]{ max-width:100%;}

JSFIDDLE

Answer 1

Петля через них на йот готов:

jQuery(document).ready(function($) 
{ 
    $("input[type='text']").each(function() 
    { 
     $(this).attr("size", $(this).val().length); 
    }); 
}); 

Fiddle

Answer 2

Если задано значение вы можете использовать это:

$(document).ready(function() { 

    $('input[type="text"]').each(function(){ 
     $(this).attr('size', $(this).attr('value').length); 
    }); 

}); 

Если вы хотите повторно размер при вводе текста:

$("input[type='text']").on('input', function() { 
    $(this).attr("size", $(this).val().length); 
    console.log($('input[type="text"]').attr('size')); 
}); 

Помните, что «размер» представляет количество символов внутри ваших входов. Фактическая ширина зависит от размера шрифта, который вы используете, и размера вашего ввода. (точно для уверенности :)