jQuery的 - 自动大小的文本输入[复制]（不textarea的！）(jQuery - auto

这个问题已经在这里有一个答案：

• 是否有文本字段一个jQuery插件自动增长？ 10个回答

我如何自动调整输入型=“文本”字段使用jQuery？ 我希望它像100像素宽在一开始，然后让它自动扩大为用户输入的文字...这可能吗？

Answer 1:

这里是一个插件，会做你以后：

该插件：

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

编辑：发现于： 是否有文本字段一个jQuery插件自动增长？

Answer 2:

我不认为存在这一问题的最佳解决方案，因为你无法检测输入到输入要素文本的实际宽度。 这一切都取决于字体的你在浏览器的使用等，变焦设置

但是，如果你可以选择字体，你其实可以计算出文本具有的像素数量（这是最难的部分，但我想你可以尝试以某种方式估算的话）。 您可以用它来改变你的输入栏的宽度。

 $('input').keyup(function () {
     // I'm assuming that 1 letter will expand the input by 10 pixels
     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters
     // are typed
     var minCharacters = 5;
     var len = $(this).val().length;
     if (len > minCharacters) {
         // increase width
         $(this).width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $(this).width(50);
     }
 });

Answer 3:

（ 编辑：使用.text()方法，而不是.html()来获取所有格式的权利。）

你好，我不知道你是否还在寻找，但我遇到了这个时候我一直在寻找一个脚本做同样的事情。 因此，希望这有助于人谁是试图做到这一点，或者类似的东西。

function editing_key_press(e){
    if(!e.which)editing_restore(this.parentNode);
    var text = $('<span>')
        .text($(this).val())
        .appendTo(this.parentNode);
    var w = text.innerWidth();
    text.remove();
    $(this).width(w+10);
}

该代码的逻辑用于将所述内容放置到页面的跨度，然后得到该内容的宽度和删除它。 我也有这个问题是与它是我必须得到它在两个运行的keydown和KeyUp它能够成功。

希望这可以帮助，也许还不如我只去过了很短的时间量做jQuery的。

谢谢

乔治

Answer 4:

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

它使用相同的方法，因为抓住的回答，但有一些在评论中提到的变化。

：你可以在这里看到一个活生生的例子http://jsfiddle.net/mJMpw/6/

例：

<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来设置最小/最大宽度，如果你想要一个漂亮的效果在使用宽度的过渡。

可以指定到端作为输入元件上的数据，自动调整大小输入属性在JSON符号的值的空间/距离。

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

$("selector").autosizeInput();

Answer 5:

我曾经抓住的回答 ，但做这些改变：

• 之间设置isValidWidthChange和// Animate width ：

   if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) { newWidth = o.maxWidth; isValidWidthChange = true; } 

  这样的投入将增长大如你允许它时，它的内容是太大，无法在最大宽度内。

• 之后$(this).bind('keyup keydown blur update', check); ：

   // Auto-size when page first loads check(); 

Answer 6:

看到这个jQuery插件： https://github.com/padolsey/jQuery.fn.autoResize

我只是文本域测试了它和它的作品！ 支持自动生长文字区域的，输入[类型=文本]和输入[类型=密码。

UPD。 貌似原作者删除从GitHub回购。 该插件还没有在很长一段时间被更新，被证明是相当马车。 我只能建议你找到一个更好的解决方案。 我做了一个拉请求，这个插件前的某个时候，所以我有一个副本在我的github帐户， 只有在情况下，你想提高它使用它，它不是防弹的 ！

另外，我发现ExtJS的框架对文本字段自动调整大小的实施，请参阅增长 config属性。 虽然它不是那么容易瓜分这个小片的逻辑出来的框架，它可以给你的方法一些好的想法。

Answer 7:

默认情况下，输入宽度由控制尺寸参数，这对于type="text"对应于字符数宽是应该的。

由于这是在字符和不像素来测量，实际像素大小由所使用的（固定宽度）字体控制。

Answer 8:

我只是在想同样的事情。 如用户在书写文字到它的文本框应该调整它的自我。 我从来没有使用过，但我有一个想法如何做到这一点。 事情是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  <table border="1">
  <tr>
    <td>
      <span id="mySpan">
        <span id="mySpan2"></span>
        <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;">
       </span>
    </td>
    <td>
            sss
    </td>
  </tr>
</table>

  </body>
</html>

Answer 9:

试试这个代码：

var newTextLength = Math.floor($("input#text).val() * .80);
$("input#text").attr("size",newTextLength);

文章来源: jQuery - auto size text input (not textarea!) [duplicate]