在保持换档键的同时防止按键

Question

我正在尝试阻止某些键输入到输入框中，但只有在 shift 键被按下时按下该特定键：

$('selector').keydown(function(e) {
  console.log(e.shiftKey);
  if (e.shiftKey && e.which == 51) {
    e.preventDefault();
    alert('Disallowed');
  }
});

警告会触发，但角色仍显示在文本框中。

我一直试图寻找解释为什么会发生这种情况，但无济于事，我们将非常感谢任何帮助！

修改

删除alert似乎解决了问题（这看起来很奇怪），我真的很想知道为什么它会以这种方式表现，但它似乎没有任何意义。

由于

Answer 1

只需使用 e.which 代替e.keyCode

$('#input').keydown(function(e) {
  if (e.shiftKey && e.which == 51) {
    e.preventDefault();
    alert('Disallowed');
  }
});

<强> Working sample

因为，来自jQuery doc：

  

对于键或鼠标事件，此属性指示特定键或   按下的按钮。 event.which 属性规范化 event.keyCode 和 event.charCode 。建议观看键盘键输入的 event.which 。    event.which 也会按下按钮（ mousedown和mouseupevents ），报告 1表示左键， 2表示中间 ， 3 for right 。使用 event.which 代替 event.button 。

在.keyup()

上试试

$('#input').keyup(function(e) {
   var val = $.trim( this.value );
  if (e.shiftKey && e.which == 51) {
    $(this).val(val.replace(/\#/,''));
  }
});

<强> DEMO

如果您尝试从输入中删除井号，请尝试：

$(this).val( val.replace(/\u00A3/g, '') );

完整代码

$('#input').keyup(function(e) {
   var val = $.trim( this.value );
  if (e.shiftKey && e.which == 51) {
    $(this).val( val.replace(/\u00A3/g, '') );
  }
});

Answer 2

如果现在的问题是：为什么alert()会有所作为？

alert是一个有趣的声明（以及confirm和prompt），它暂停执行您的JavaScript，但释放了等待JavaScript执行的任何其他浏览器处理。它会干扰调试很多。

在您的JavaScript完成之前，浏览器不会回复您的preventDefault()语句，因此alert已暂停您的JavaScript，因此浏览器未收到该事件的返回状态这一点，不幸的是alert允许浏览器处理其他事件，即keypress偷偷过去，因此您会看到您不想输入的字符出现。

你无法使用alert，或者，如果你需要它（？！），你可以用setTimeout包裹它，这样它就不会阻止你的JavaScript和结果keydown会导致keypress被压制。

-

或者，你可以在第一时间使用keypress！

$('selector').keypress(function(e) {
  console.log(e.shiftKey);
  if (e.which == 163) {
    e.preventDefault();
    alert('Disallowed');
  }
});

但仍然不能阻止其他方法输入字符，所以我个人不会首先考虑这个。 ： - /

Answer 3

$('#selector').keydown(function(e) {
  console.log(e.shiftKey);
  if (e.shiftKey && e.keyCode == 51) {
    $(this).prop('disabled', true);
    //do something, fade an object in...display a message, etc
    setTimeout(function(){
      $(this).prop('disabled', false);
    }, 500);
  }
});

这适合我。

修改

添加了setTimeout函数来复制你的愿望。