如果达到输入最大长度，则执行某些操作答案

【问题标题】：If input maxlength is reached do something如果达到输入最大长度，则执行某些操作
【发布时间】：2018-04-21 00:55:52
【问题描述】：

我的输入字段的最大长度为 11。我想在达到 maxlength 并且用户继续尝试输入时执行一个 jQuery 函数，所以它不会不做任何事情，而是显示一条消息。

你能给我一些建议吗？

提前致谢！

【问题讨论】：

您可以使用计数器并在计数器等于 maxlength 时显示弹出消息
检查keyup 事件，并在其中检查输入的长度。如果条件匹配，调用你想要的javascript代码。
您可以使用keyup或keydown事件并检查长度是否与您的最大值相同，然后显示您的消息

标签： javascript jquery input maxlength

【解决方案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" />

【讨论】：

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

【解决方案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">

【讨论】：

这个答案缺少教育解释。

【解决方案3】：

您正在寻找类似的东西：

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

显然更改为使用正确的选择器和警报/模式弹出窗口。

【讨论】：

这个答案缺少教育解释。

【解决方案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>

【讨论】：

这个答案缺少教育解释。

【解决方案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>

【讨论】：