javascript 按住 shift 键时防止按键

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11263593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 12:35:38  来源:igfitidea点击:

Prevent keypress whilst shift key is held

javascriptjquery

提问by billyonecan

I'm trying to prevent certain keys from being entered into an input box, but only if that particular key is pressed whilst the shiftkey is held:

我试图阻止将某些键输入到输入框中,但前提是在按住shift键的同时按下该特定键:

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

The alert fires but the character still appears in the text box.

警报触发,但字符仍出现在文本框中。

I've tried searching around for an explanation as to why this happens but to no avail, any help would be greatly appreciated!

我试过四处寻找关于为什么会发生这种情况的解释,但无济于事,任何帮助将不胜感激!

edit

编辑

Removing the alertseems to fix the problem (which seems bizarre), I'd really love to know why it behaves in this way though, it doesn't seem to make any sense.

删除alert似乎解决了这个问题(这看起来很奇怪),我真的很想知道它为什么会这样,但这似乎没有任何意义。

Thanks

谢谢

回答by thecodeparadox

Just use e.whichinstead of e.keyCode

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

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

Working sample

工作样本

Because, From jQuery doc:

因为,来自 jQuery 文档:

For key or mouse events, this property indicates the specific key or button that was pressed.The event.whichproperty normalizes event.keyCodeand event.charCode. It is recommended to watch event.whichfor keyboard key input. event.whichalso normalizes button presses (mousedown and mouseupevents), reporting 1 for left button, 2 for middle, and 3 for right. Use event.whichinstead of event.button.

对于键或鼠标事件,此属性表明是pressed.The特定的按键或按钮event.which财产归event.keyCodeevent.charCode。建议观看event.which进行键盘按键输入。 event.which也归按钮按压(鼠标按下和mouseupevents),报告1左按钮2为中间,和3为右。使用event.which而不是event.button

Try this on .keyup()

试试这个 .keyup()

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

DEMO

演示

?

?

If you're trying to remove pound sign from input then try:

如果您尝试从输入中删除英镑符号,请尝试:

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

Full code

完整代码

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

回答by Lee Kowalkowski

If the question is now: why does alert()make a difference?

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

alertis a funny statement (and confirmand prompt), it suspends execution of your JavaScript, but frees up any other browser processing that was waiting for your JavaScript to execute. It can interfere with debugging quite a lot.

alert是一个有趣的语句(和confirmprompt),它暂停执行您的 JavaScript,但释放任何其他等待您的 JavaScript 执行的浏览器处理。它会干扰调试很多。

The browser won't respond to your preventDefault()statement until your JavaScript has finished, putting alertin there has suspended your JavaScript, so the browser hasn't received a return status of the event at this point, and unfortunately the alerthas allowed the browser to process other events, namely keypresswhich sneaks past and hence you see the character you don't want to be typed appear.

浏览器preventDefault()在你的 JavaScript 完成之前不会响应你的语句,放入alert那里已经暂停了你的 JavaScript,所以此时浏览器还没有收到事件的返回状态,不幸的是alert它允许浏览器处理其他事件,即keypress它偷偷过去,因此您会看到您不想输入的字符出现。

You could not use alert, or, if you need it (?!) you could issue it wrapped in a setTimeout, so that it doesn't block your JavaScript and the result of the keydownwill lead to the keypressbeing suppressed.

您不能使用alert,或者,如果您需要它(?!),您可以将其包裹在 a 中setTimeout,这样它就不会阻止您的 JavaScript 并且 the 的结果keydown将导致keypress被抑制。

--

——

Or, you could have used keypressin the first place!

或者,你一开始就可以使用keypress

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

That still doesn't prevent characters being entered by alternative methods though, so I wouldn't entertain this in the first place, personally. :-/

尽管如此,这仍然不能阻止通过其他方法输入字符,所以我个人首先不会接受这一点。:-/

回答by Ohgodwhy

$('#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);
  }
});

This works for me.

这对我有用。

EDIT

编辑

Added setTimeout function to replicate your desire.

添加了 setTimeout 功能来复制您的愿望。