Question

我想将<input>用作具有自动宽度的可编辑框。这就是我到目前为止所做的：

<div>
    <table>
        <tr>
            <td>aaaa</td>
            <td>bbbb</td>
        </tr>
        <tr>
            <td><input type="text" value="this_box_i_want_to_have_auto_td_width"/></td>
            <td><input type="text" value="sometextsometext"/></td>
        </tr>

    </table>
</div>

当我在输入框中输入更多文字时，如何调整大小？

Answer 1

$("input").on("keyup", function() {
    var length = $(this).val().length;
    if (length >= 10 && length < 20) {
        $(this).css({ "width": "200px" });
    } 
    else if (length >= 20 && length < 30) {
        $(this).css({ "width": "250px" });
    }
    else if (length >= 30) {
        $(this).css({ "width": "500px" });
    }
});

input {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />

您需要侦听keyup事件，以确定用户输入的文本的长度。我们可以用长度变量来跟踪它。

我们将根据长度设置多个条件。我们可以使用css属性调整宽度。

Answer 2

将文本输入设置为100％。如果需要，为它们提供最大宽度，否则它将限制为表列的宽度。如果你不想让它溢出，请删除所有边距。

或者，宽度：自动;如果应用边距或填充，在文本字段上将允许它们展开而不会溢出。它们应该从父元素继承最大宽度。

html输入自动宽度

2 个答案: