javascript - 将输入框调整为内容加载

试图让我的输入框 [type='text'] 在页面加载时重新调整其内容的大小。使用此代码，他们有效地重新调整了 焦点 的大小。
$(document).ready(function () { $("input[type='text']").bind('focus', function () { $(this).attr("size", $(this).val().length ); });});
我曾尝试为不同的事件(例如“加载”和“准备”)交换“焦点”，但无济于事。请记住，我正在寻找轻量级和快速的东西，它将在页面加载时将所有输入 [type='text'] 框的大小重新调整为它们的内容。

JSFIDDLE

解决方案

我最终使用 Thom's 答案作为解决方案，但后来我意识到我还希望输入框在输入文本时展开。所以我结合了我之前的内容和 Thom 的答案来提供这两个功能。我还添加了 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

最佳答案

在 dom 就绪时循环遍历它们:

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

Fiddle