javascript - Firefox 兼容输入过滤

Question

我试图阻止大多数特殊字符(“_”和“-”除外)在文本输入字段中起作用。

我开始通过模式(不起作用)做一个正则表达式过滤器，然后通过动态js，后来发现它在firefox上不起作用，我不能使用破折号，下划线，退格键，删除，或方向键，尽管它显示我可以 https://regexr.com/

我找到了另一个解决方案，实际上通过使用 ascii 表来阻止按键，听起来也很棒，但现在我仍然无法使用下划线或破折号，尽管我的逻辑似乎很好并且按键没有记录。

<input id="directory" type="text">

$("#directory").keypress(function(e){
var keyCode = e.which;

/*
48-57 - (0-9)Numbers 65-90 - (A-Z) 97-122 - (a-z) 8 - (backspace)
*/
if (
   !(
     (keyCode == 8 )
     ||(keyCode == 45)
     ||(keyCode == 95)
     ||(keyCode >= 48 && keyCode <= 57)
     ||(keyCode >= 65 && keyCode <= 90)
     ||(keyCode >= 97 && keyCode <= 122)
   )
 ){
 e.preventDefault();
 $("#directory").val('')
 console.log(keyCode);
  toastr.error("Your search string contains illegal characters.  Please use, a-z, A-Z, 0-9, -, or _", "Error", {timeOut: 10000, preventDuplicates:true, positionClass : "toast-top-center"}); 
  }
});

编辑:当然，相反的操作也不起作用

 if (
   (
     (keyCode >= 0 && keyCode <= 7)
     ||(keyCode >= 9 && keyCode <= 44)
     ||(keyCode >= 46 && keyCode <= 47)
     ||(keyCode >= 58 && keyCode <= 64)
     ||(keyCode >= 91 && keyCode <= 94)
     ||(keyCode == 96)
     ||(keyCode >= 123 && keyCode <= 127)
   )
){

我不知道为什么，但是45和95仍然不允许我输入下划线或破折号，任何人都可以帮助我，我想要的解决方案是a-z，A-Z，0-9，-，_输入？

Answer 1

我建议不要依赖 keydown，因为当您使用上下文菜单粘贴内容时(例如)，它不会触发。要为用户应用的任何更改触发事件，请使用 input 事件。

该事件的缺点是无法取消。但撤消其中包含无效字符的(部分)更改并不太困难。

它的工作原理如下:

$('#directory').on('input', function (e) {
    var i = $(this).val().search(/[^\w-]/);
    if (i < 0) return; // All OK
    $(this).val($(this).val().replace(/[^\w-]/g, ''));
    this.setSelectionRange(i, i);
});

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

我的观点是，这种字符阻塞实际上对用户不友好:人们可能会暂时认为他们的键盘出现了故障。最好允许输入字符，但要给出输入无效的视觉指示，例如使用红色边框和附带消息。