我如何自动扩展输入，而不是文本区域？答案

【问题标题】：How i do autoexpand input, not textarea?我如何自动扩展输入，而不是文本区域？
【发布时间】：2013-08-28 19:25:25
【问题描述】：

喜欢这个http://www.jacklmoore.com/autosize/ 但不是textarea，输入。它不适用于输入。例如：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='jss/jquery.autosize.js'></script>
        <script>
            $(function () {
                $('.normal').autosize();
            });
        </script>
    <body>
        <textarea class='normal'></textarea>
    </body>

我需要-固定宽度、高度变化的输入

<input class='normal'/>

请帮忙

【问题讨论】：

jsbin.com/ahaxe
啊对，固定宽高的输入变化

标签： jquery input autoresize

【解决方案1】：

您可以使用contenteditable DIV：

<div contenteditable="true" class="normal"></div>

.normal {
    width: 150px;
    min-height: 16px;
    overflow: hidden;
    padding: 3px 3px 2px;
    border: 1px solid #aaa;
    border-radius: 2px;
    font-size: 11px;
    font-family: Helvetica,Arial;
}

jsFiddle：http://jsfiddle.net/z4EX6/

【讨论】：

【解决方案2】：

这是你可以使用的：

    $(".normal").bind("keydown", function () {
        var charWidth = $(this).css("font-size").replace("px", "") * 0.5;
        var newWidth = (($(this).val().length + 10) * charWidth);
        var minWidth = 100;
        var maxWidth = 1000;
        if (newWidth > minWidth && newWidth < maxWidth) {
            $(this).width(newWidth);
        }
    });

用于计算字符宽度的系数 0.5 取决于您使用的字体类型。不过 0.5 对大多数字体类型来说应该已经足够了。

指定最小和最大宽度将确保控件的宽度不会超出范围。

【讨论】：