Question

我已经阅读了许多类似的问题，但找不到适合这两个条件的问题（只输入最大长度为5的数字）。我尝试了不同的变体，其中之一是：

fatal error: unexpectedly found nil while unwrapping an Optional value

对于这个我仍然可以输入任意数量的数字，所以min max属性并没有真正做任何事情。

Answer 1

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

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

＆＃13;

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();

＆＃13;

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

＆＃13;

（焦点已添加到输入框中以便于测试。）

Answer 2

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

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

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

＆＃13;

/////////////////////////////////////////////////////
// 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);
  }
});

＆＃13;

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

＆＃13;

将HTML输入限制为仅限数字，使用maxlength 5（忽略其他字符）

2 个答案: