Question

像这样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'/>

帮助

Answer 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/

Answer 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，对于大多数字体类型应该足够好了。

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

我怎么做autoexpand输入，而不是textarea？

2 个答案: