（jQuery）遮罩输入插件在达到最大长度时会覆盖文本

Question

假设我有这样一个输入：

$('#phone').mask("?99999", { placeholder: "" });

如果我输入'12345'，然后将光标放在3和4之间，按下1，文本将变成：'12314'。

我想要一个类似于maxlength的行为，当达到限制时阻止任何额外的字符输入，所以如果maxlength = 5，那么文本将保持为'12345'。

这是插件: http://digitalbush.com/projects/masked-input-plugin/。

- Felipe Vaz

---

maxlength有什么问题？ - George

该插件不支持maxlength限制。 - Felipe Vaz

@FelipeVaz，你能展示一下如何包含插件吗？ - Popnoodles

Answer 1

把它作为jQuery的属性添加对我有效: $('#phone').mask("?99999", { placeholder: "" }).attr('maxlength', 5); 最初的回答。

- nateM

Answer 2

编辑

首先，使用此处找到的解决方案如何在使用jQuery掩码输入时避免现有值向右移动？，以避免掩码插件在按键时将字符向右移动的行为。

然后，在输入上设置maxlength属性

<input type="text" id="phone" maxlength="5">

这将限制输入长度。

- jtheman

---

由于插件覆盖了文本，所以maxlength永远不会超过限制。 - Felipe Vaz

啊，我现在可以重现你的问题了（http://jsfiddle.net/C2FvX/1/）。这真的是一个很大的问题吗？ - jtheman

尝试对掩码插件进行以下更改（并设置noshift：true）http://stackoverflow.com/questions/2561252/how-do-i-keep-existing-values-from-shifting-to-the-right-when-entering-keypresse?rq=1 - 然后，maxlength将起作用。 - jtheman

Answer 3

明白你想要实现什么。

假设你有一个像这样的文本框：

<input type="text" name="username" id="username">

输入验证的jQuery代码为：

$('#username').on('input', function() {

     var value = $('#username').val();

    if (value.length == '5') {
       $('#username').attr('readonly', true);


    }
});

我已经为您做了一个 jsfiddle。请尝试这个： http://jsfiddle.net/4Rxh7/1/

- Hyder B.

---

很抱歉，但遮罩插件会破坏它：http://jsfiddle.net/4Rxh7/2/此外，无法编辑值并不是一个很好的解决方案... - jtheman

Answer 4

尝试这个：

HTML：

<input type="text" name="username" id="username" maxlength="5">

JavaScript：

$('#username').on('keydown', function(event) {

    var txtBox = $('#username');
    if (txtBox.attr("maxlength") == txtBox.val().length) {
        event.preventDefault();
        event.stopPropagation();
    }
});
$('#username').mask("?99999", { placeholder: "" });

- bastos.sergio

Answer 5

在输入元素上加上MAXLEN。

- T McKeown