解决方案

Question

尝试获取我的输入框[type =＆＃39; text＆＃39;]在页面加载时重新调整其内容的大小。使用此代码，他们可以有效地重新调整焦点的大小。

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

我尝试过交换＆＃39;焦点＆＃39;对于不同的事件，例如“加载”等。和＆＃39;准备好＆＃39;无济于事。请记住，我正在寻找轻量级和快速的内容，它会在页面加载时将所有输入[type =＆＃39; text＆＃39;]框重新调整为其内容。

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

Answer 1

在dom准备就绪：

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'));
});

请记住，'size'表示输入中的字符数。实际宽度取决于您使用的字体大小和输入的大小。（只是肯定：）

将输入框的大小调整为内容onload

解决方案

2 个答案: