javascript - 防止输入中的特殊字符和重音符号 (´`¨^~) (jQuery)

Question

我有一个限制为 3 个字符的输入字段，我只想允许数字

我有一个几乎适用于所有情况的解决方案：（下面的问题）

// Avoid any unwanted keys from showing
$("input#test").keypress(function(event) {
  if (!isApprovedKeyCode(event)) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
});

// Useless try to prevent accents from showing
$("input#test").keydown(function(event) {
  if (event.keyCode == 229) { // ´
    event.preventDefault();
    event.stopImmediatePropagation();
    event.stopPropagation();
    return false;
  }
});

//A few character modifiers (i.e. ´`¨^~) do not trigger keypress
//This ensures the input only contains numbers
$("input#test").keyup(function(event) {
  var element = event.target;
  var validString = element.value.replace(/[^0-9]/g, '');
  if (validString !== element.value) {
    element.value = validString;
  }
});

function isApprovedKeyCode(event) {
  var keyCode = event.which || event.keyCode;
  var character = String.fromCharCode(keyCode);
  return isValidDigit(character);
}

function isValidDigit(character) {
  var result = /\d/.test(character);
  return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="3" id="test" />

问题：

• 重音仍然显示（直到键盘将它们从输入中删除）
• 如果您有一个 2 位数的值并输入一个重音 (´`¨^~)（它会消失），然后尝试输入一个数字，由于 3 个字符的限制，该数字永远不会显示。例子：
  • 将输入设置为 12
  • 按´键
  • 按 3
  • 在这种情况下 3 将不会出现在输入中，您需要再次按下它

如您所见，我已尝试在 keydown 中防止这种情况发生，但尝试的事件预防似乎都不适用于这些键

我也尝试过使用 type="number" 的输入。快速示例：

// Limit lenght
$("input#test").keydown(function(event) {
  var element = event.target;
  if(element.value.length > 2) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" min="1" max="999" id="test" />

这也显示重音并允许通过按重音后跟数字来添加超过限制

关于适当解决此问题的任何想法？

谢谢！

标签： javascriptjqueryhtml