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

Question

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

下面是一个示例:

http://jsfiddle.net/bzBdX/2/

- Wordpressor

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/

- David Laberge

---

这在 jsfiddle 上无法工作，请考虑添加“keydown”函数以便监听按键事件。 - Mohamad Al Asmar

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();

- MartinF

Answer 3

现有的答案都太复杂了。这里有一个简单的解决方案。

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

将以上内容添加到输入键按下/弹起/按事件中很容易。 在chrome中测试通过。

- Ahmed-Anas

---

从技术上讲，问题提到了jQuery。然而，这是解决问题的最佳方案。敬礼 - Federico C

当我删除字符时，似乎它并没有减少宽度。 - Tomh

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/

- Manse

Answer 5

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

- Yorgo

Answer 6

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

所以我做了一个例子，它尝试通过在一个 span 中插入字母并计算宽度来计算宽度。

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

可能有更好的方法来完成这个任务。

- megakorre

---

为什么要乘以0.89？ - Alejandro Pérez

Answer 7

正如@ManseUK所提到的，这行代码对我起作用了。 JQuery版本1.8

$('#resizeme').css({width:newwidth});

- Manish Gupta

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

- Alexandr K

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

- ImmortalPC

Answer 10

你可以在 js fiddle 上检查这个演示... http://jsfiddle.net/ninadajnikar/bzBdX/9/。

你可以根据自己的喜好更新宽度值

- Ninad Ajnikar