限制 HTML 输入仅限数字，最大长度为 5（忽略其他字符）

Question

我读过很多类似的问题，但找不到适用于这 2 个条件的问题（仅输入最大长度为 5 的数字）。我尝试了不同的变体，其中之一是：

<div class="input text">
    <input id="zip" name="zip" type="number"  min="0" max="99999" ng-model="formData.zip" placeholder="Type here..." class="input-medium" ng-init="0">

对于这个，我仍然可以输入任意数量的数字，所以 min max 属性实际上没有任何作用。

Answer 1

这是一种方法。在 keyup 上，处理程序检查输入值；如果超过五个字符，则不再让用户添加。如果输入了非数字字符，该函数会将其删除。

更新：此代码现在可以处理在包的开头或中间插入数字，以及当已经存在五个字符时。

var inputEl = document.getElementById('zip');
var prev = "";

inputEl.addEventListener('keyup', function(e) {
  if (e.which == 8) { // if backspace
    prev = inputEl.value;
    return;
  }
  // check for >5 characters
  if (inputEl.value.length > 5) {
    if (e.which < 48 || e.which > 57) { // if new char is a number
      inputEl.value = prev;
    } else {
      inputEl.value = inputEl.value.slice(0, inputEl.value.length - 1);
    }
    if (inputEl.value.length > 5) { // if still >5 after parsing
      inputEl.value = inputEl.value.slice(0, 5);
    }
  }
  // check for a digit (code 48 to 57)
  else if (e.which < 48 || e.which > 57) {
    (inputEl.value.length > 1) ? inputEl.value = prev: inputEl.value = "";
  }
  prev = inputEl.value;
});

inputEl.focus();

<div class="input text">
  <input id="zip" name="zip" placeholder="Type here...">
</div>

（为方便测试，将焦点添加到输入框。）

Answer 2

一种更激进的方法，使用 keydown 事件并通过 preventDefault 阻止所有不需要的输入：

编辑：我还提供了一个允许 copy/pasting 进行比较的版本，但在这种情况下，您需要使用 keyup 来允许在修复粘贴的内容之前进行粘贴。

对于您想要允许的任何其他键或组合键，您只需将它们添加到第一个 if 语句中作为允许的输入即可。

/////////////////////////////////////////////////////
// Super strict version only allows numbers as input
/////////////////////////////////////////////////////
var input = document.getElementById('num');

input.addEventListener('keydown', function(event) {
  // always allow backspace, delete, left/right arrow keys
  if (event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39) { 
    return;
  }
  // prevent all other input if already at 5 chars or not a number
  else if (input.value.length >= 5 || event.which < 48 || event.which > 57) {
    event.preventDefault();
    return;
  }
});

/////////////////////////////////////////////////////
// Version that allows for copy/pasting
/////////////////////////////////////////////////////
var inputPaste = document.getElementById('paste-num');

inputPaste.addEventListener('keydown', function(event) {
  // always allow backspace, delete, left/right arrow, copy, paste, select all
  if (event.which == 8 || event.which == 46 || event.which == 37 || event.which == 39 || (event.ctrlKey && event.which == 67) || (event.ctrlKey && event.which == 86) || (event.ctrlKey && event.which == 65)) { 
    return;
  }
  // prevent all other input if already at 5 chars or not a number
  else if (inputPaste.value.length >= 5 || event.which < 48 || event.which > 57) {
    event.preventDefault();
    return;
  }
});

// clean anything that gets pasted in
inputPaste.addEventListener('keyup', function(event) {
  if (event.ctrlKey && event.which == 86) {
    // remove non numbers
    inputPaste.value = inputPaste.value.replace(/[^0-9]/g, "");
    // trim to first 5 digits
    inputPaste.value = inputPaste.value.substr(0, 5);
  }
});

Numbers Only: <input id="num" name="num" placeholder="#####"> <br>
Numbers Only(can copy/paste):<input id="paste-num" name="paste-num" placeholder="#####">

限制 HTML 输入仅限数字，最大长度为 5（忽略其他字符）

Restrict an HTML input to digits only, with maxlength 5 (ignore other characters)

html

input

maxlength