0

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

请帮助

4

2 回答 2

0

您可以使用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/

于 2013-08-28T11:12:57.157 回答
0

这是您可以使用的：

    $(".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 对于大多数字体类型应该足够了。

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

于 2013-08-28T11:25:25.703 回答