jquery - 检测输入字段中的溢出

Question

如果输入字段开始溢出，有没有办法用 jQuery 检测？还是我必须这样做<textarea></textarea>或类似的事情？

我已经尝试过：

<input id="inputField" type="text" />

<script>
    $(document).ready(function() {
        $("input").keyup(function() {
            var maxLen = 3
            var box = document.getElementById('inputField')[0];
            if (box.value.length > maxLen - 1) {
                alert('stop');
            }
        });
    });
</script>

但它并没有真正起作用。

Answer 1

我做了一些更改，但重要的是[0]从getElementById通话中删除。

$(document).ready(function() {
    $("input").keyup(function() {
        var maxLen = 3;
        var box = document.getElementById('inputField');
        if (box.value.length >= maxLen) {
            alert('stop');
        }
    });
});

您还可以依靠纯 HTML 验证：

<input id="inputField" type="text" maxlength="3" />

和 HTML5 验证属性...

<input id="inputField" type="text" maxlength="3" required />

如果您只是希望文本字段在某人键入时扩展，您可以使用以下命令：

鉴于此输入：

<p>Test Input: <input type="text" size="4" name="test" id="test" /></p>

这将在您键入时展开：

var testInput = document.getElementById('test');

var setLength = function () {
    testInput.size = testInput.value.length ? testInput.value.length : 1;
};

testInput.onkeyup = setLength;

setLength();

Answer 2

如果您的目的是限制用户输入，您实际上不必为此使用 jquery。您还可以使用：

<input maxlength="number">

在这个 W3schools 页面上阅读它

如果你必须使用 jQuery，你可以这样做：

$('input#input_amount').keyup(function () {
        $(this).val(function (i, val) {

            if (val.length>3){
                alert('stop');
            };
            return val;
        });
    });

在这里查看它的实际效果：http: //jsfiddle.net/BkZcq/

我已经编辑了这个答案（见评论）：

$('input#input_amount').keyup(function () {
        $(this).val(function (i, val) {

            if (val.length>3){
                $(this).attr("size", val.length +1);
            };
            return val;
        });
    });