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');
        }
    });
});

您还可以依靠pure HTML validation：

<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">

在this W3schools page

上阅读

如果你必须使用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;
        });
    });

检测输入字段中的溢出

2 个答案: