Question

我想在输入字段中使用pattern属性只允许数字和正斜杠字符

Answer 1

您可以使用此网站获取keyCode：http://keycode.info/
0-9 keyCodes是＆＃39; 48＆＃39; 57＆＃39; 57＆＃39;正斜杠的keyCode是191。

＆＃13;

function validateNumberAndForwardSlash(event) {
    var key = window.event ? event.keyCode : event.which;

  if (event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode == 191) {
    return true;
  } else {
    return false;
  }
};

＆＃13;

<input type="text" onkeypress="return validateNumberAndForwardSlash(event);">

＆＃13;

P.S。这是一个keyCode摘要文章：https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 2

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 47) 
    {
        return false;
    }
    return true;
}

Answer 3

您不应听键盘事件（keydown / keypress / keyup）来过滤某些字符，因为输入的值也可以通过粘贴或拖放文本来更新进入其中，您应该避免很多例外，例如箭头，删除，转义，诸如全选，复制，粘贴之类的快捷方式...因此，尝试列出应允许的详尽清单是可能的这不是一个好主意。

相反，只需侦听input事件并更新输入值即可删除所有无效字符，同时保留光标的位置：

const input = document.getElementById('input');

input.oninput = (e) => {  
  const cursorPosition = input.selectionStart - 1;
  const hasInvalidCharacters = input.value.match(/[^0-9/]/);

  if (!hasInvalidCharacters) return;
  
  // Replace all non-digits:
  input.value = input.value.replace(/[^0-9/]/g, '');
  
  // Keep cursor position:
  input.setSelectionRange(cursorPosition, cursorPosition);
};

<input id="input" type="text" placeholder="Digits and forward slash only" />

在这里，您会看到类似的答案和示例，说明行为稍微复杂一些，只允许使用一个小数点分隔符的数字：https://stackoverflow.com/a/64084513/3723993

我想在html输入字段中仅允许数字和正斜杠

3 个答案: