如果达到输入最大长度，做些什么？

Question

我有一个输入框的最大长度是11个字符。当输入框达到最大长度时且用户继续输入，我想执行一个jQuery函数，而不是什么都不做，它会显示一条消息。

请问您能给我一些指导吗？

先谢谢了！

- S.Pearson

---

当计数器达到最大值时，您可以使用弹出消息，并显示计数器。 - Rahul

检查 keyup 事件，并在其中检查输入的长度。如果条件匹配，则调用您想要的 JavaScript 代码。 - dlopez

你可以使用 keyup 或 keydown 事件来检查长度是否达到最大值，然后显示你的消息。 - Kaddath

Answer 1

尝试这个：当用户输入11个字符时，IT会弹出一条消息。

$("input").on("keyup",function() {
  var maxLength = $(this).attr("maxlength");
  if(maxLength == $(this).val().length) {
    alert("You can't write more than " + maxLength +" chacters")
  }
})

演示

$("input").on("keyup",function() {
  var maxLength = $(this).attr("maxlength");
  if(maxLength == $(this).val().length) {
    alert("You can't write more than " + maxLength +" chacters")
  }
})

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

- Carsten Løvbo Andersen

---

这也会触发不写入字符的按键，例如输入11个字符后使用箭头键移动光标就会触发警报。或者尝试使用“Ctrl”+“C”复制输入时也会触发。 - Marcono1234

Answer 2

试试这段代码

$(document).ready(function() {
  $("#text").keypress(function(e) {
    var length = this.value.length;
    if (length >= 11) {
      e.preventDefault();
      alert("not allow more than 11 character");
    }
  });

});

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

- Bhargav Chudasama

---

这个答案缺少教育性的解释。 - mickmackusa

Answer 3

你正在寻找类似于以下内容的东西：

$("input").keypress(function(e){
    if(e.target.value.length==11){
        alert("maxlength reached");
    }
});

显然需要更改为正确的选择器并使用警报/模态弹出窗口。

- Bijan Rafraf

---

这个答案缺少教育性的解释。 - mickmackusa

Answer 4

$(document).ready(function(){
$("input").keyup(function(){
var a = $(this).val().length;
if(a >= 11){
$(this).attr('maxlength','11')
alert("not allowed")
}
})
})

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

- vicky patel

---

这个答案缺少教育性的解释。 - mickmackusa

Answer 5

如果你添加 $(document)，它将查找所有带有 maxlength 属性的输入，即使你在加载页面后创建了它们。

$(document).on("input keypress", "input[maxlength]", function (e) {
    var $input = $(e.currentTarget);
    if ($input.val().length >= $input.attr("maxlength")) {
        alert("Max length reached")
    }
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input>

- Joan