我发现你不能使用任何onkeydown, onkeypress或onkeyup事件的完整解决方案，包括移动浏览器。顺便说一下，onkeypress已弃用，不再出现在chrome/opera的android(见:UI事件 W3C工作草案，2016年8月4日)。

我只使用oninput事件找到了一个解决方案。 你可能需要做额外的数字检查，如负号/正号或小数和千个分隔符等，但作为一个开始，以下应该足够了:

函数checkMaxLength(事件){ //准备恢复之前的值 如果这一点。oldValue === undefined) { 这一点。oldValue = this.defaultValue; ｝ 如果(this.value。长度> this.maxLength) { //设置回前一个值 这一点。value = oldVal; ｝ 其他{ //存储之前的值。 这一点。oldValue = this.value; //对+/-或。/等进行额外检查 //同时考虑合并'maxlength' //使用'min'和'max'来防止错误提交。 ｝ ｝

我还建议将maxlength与min和max结合起来，以防止如上所述的错误提交。

另一种选择是为任何具有maxlength属性的东西添加一个侦听器，并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码，JavaScript才是最重要的。

// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } <label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>

这可能会帮助到某些人。

用一点javascript，你可以搜索所有的datetime-local输入，搜索用户试图输入的年份，大于100年后:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });

如果您正在寻找一种移动Web解决方案，希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作，这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字，这不是最佳的。

更相关的属性是min和max。

我使用一个简单的解决方案的所有输入(与jQuery):

$(document).on('input', ':input[type="number"][maxlength]', function () {
    if (this.value.length > this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});

代码选择maxlength定义的所有输入类型="number"元素。