Question

是否可以获取输入的值宽度并动态调整输入大小以使值适合？

以下是一个例子：

Answer 1

这是jQuery代码：

$('input').each(function(){
var value = $(this).val();
var size  = value.length;
// playing with the size attribute
//$(this).attr('size',size);

// playing css width
size = size*2; // average width of a char
$(this).css('width',size*3);

});

http://jsfiddle.net/bzBdX/7/

Answer 2

我在GitHub上有一个jQuery插件：https://github.com/MartinF/jQuery.Autosize.Input

它反映了输入的值，因此它可以计算实际长度，而不是猜测或提到的其他方法。

您可以在此处查看实时示例：http://jsfiddle.net/jw9oqz0e/

示例：

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

如果你想要一个很好的效果，你只需使用css设置最小/最大宽度并在宽度上使用过渡。

您可以指定结尾的空格/距离作为输入元素上data-autosize-input属性的json表示法中的值。

当然你也可以使用jQuery初始化它

$("selector").autosizeInput();

Answer 3

目前的答案是复杂的。这是一个快速的

$('#myinput').width($('#myinput').prop('scrollWidth'))

将上述内容添加到输入keydown / up / press事件是微不足道的。在chrome中测试

Answer 4

简单的事情：

$('#resizeme').keydown(function(){  // listen for keypresses
 var contents = $(this).val();      // get value
 var charlength = contents.length;  // get number of chars
 newwidth =  charlength*9;          // rough guesstimate of width of char
 $(this).css({width:newwidth});     // apply new width
});

您可以更改个人偏好/文字大小的乘数

示例：http://jsfiddle.net/bzBdX/6/

Answer 5

$(function(){
    $("input").keyup(function(){
        $(this).stop().animate({
        width: $(this).val().length*7
    },100)                
    })
})

Answer 6

http://jsfiddle.net/bzBdX/11/

所以我做了一个例子，它试图计算宽度在一个跨度中插入字母并计算宽度

(function() {
    var mDiv = $("<span />").text("M").appendTo("body"),
        mSize = mDiv.width();
    mDiv.detach();

    var letterSize = function(s) {
        var sDiv = $("<span />").text("M" + s + "M").appendTo("body"),
            sSize = sDiv.width();

        sDiv.detach();

        return (sSize - (mSize * 2)) * 0.89;
    };

    $("input[data-resise-me]").each(function() {
        var minSize = $(this).width();

        var resizeInput = function() {
            var calcSize = $.map($(this).val(), letterSize);
            var inputSize = 0;
            $.each(calcSize, function(i, v) { inputSize += v; });

            $(this).width( inputSize < minSize ? minSize : inputSize );
        };

        $(this).on({ keydown: resizeInput, keyup: resizeInput });
    });
} ());

Theres可能是一个更好的方法。

Answer 7

如@ManseUK所述。这条线对我有用。 JQuery版本1.8

$（＆＃39;＃resizeme＆＃39）的CSS（{宽度：newwidth}）;

Answer 8

所有基于字符数的解决方案都非常弱，因为如果它不是单色字体，则每个字符可以具有不同的宽度。我正在解决这个问题，创建一个包含文本输入值的div，它具有相同的字体属性，并将其宽度作为必需的宽度。

这样的事情：

function resizeInput() {
    $('body').append('<div class="new_width">'+$(this).val()+'</div>');
    $(this).css('width', $('.new_width').width());
    $('.new_width').remove()
}
$('input')
    // event handler
    .keyup(resizeInput)
    // resize on page load
   .each(resizeInput);

Answer 9

此示例已在Chrome 25和Firefox 19上进行了测试。（http://jsfiddle.net/9ezyz/）

function input_update_size()
{
    var value = $(this).val();
    var size  = 12;

    // Looking for font-size into the input
    if (this.currentStyle)
        size = this.currentStyle['font-size'];
    else if (window.getComputedStyle)
        size =  document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size');
    $(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500);
    //$(this).width((parseInt(size)/2+1)*value.length);
}

$('input')
    .each(input_update_size)
    .keyup(input_update_size);

Answer 10

您可以在js fiddle ... http://jsfiddle.net/ninadajnikar/bzBdX/9/上查看此演示。

您可以根据需要更新宽度值

jQuery - 根据值的宽度调整表单输入的大小？

10 个答案: