jQuery 如何使用jQuery捕获退格键?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4935655/
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-08-26 18:12:57  来源:igfitidea点击:

How to trap the backspace key using jQuery?

jquery

提问by ChrisP

It does not appear the jQuery keyup, keydown, or keypress methods are fired when the backspace key is pressed. How would I trap the pressing of the backspace key?

当按下退格键时,不会触发 jQuery keyup、keydown 或 keypress 方法。我将如何捕获按下退格键?

回答by Prakash

try this one :

试试这个:

 $('html').keyup(function(e){if(e.keyCode == 8)alert('backspace trapped')})  

回答by Highway of Life

Regular javascript can be used to trap the backspace key. You can use the event.keyCode method. The keycode is 8, so the code would look something like this:

常规 javascript 可用于捕获退格键。您可以使用 event.keyCode 方法。键码是 8,所以代码看起来像这样:

if (event.keyCode == 8) {
    // Do stuff...
}

If you want to check for both the [delete] (46) as well as the [backspace] (8) keys, use the following:

如果要同时检查 [delete] (46) 和 [backspace] (8) 键,请使用以下命令:

if (event.keyCode == 8 || event.keyCode == 46) {
    // Do stuff...
}

回答by Roshan Khandelwal

Working on the same idea as above , but generalizing a bit . Since the backspace should work fine on the input elements , but should not work if the focus is a paragraph or something , since it is there where the page tends to go back to the previous page in history .

使用与上述相同的想法,但稍微概括一下。由于退格键在输入元素上应该可以正常工作,但如果焦点是段落或其他内容则不应该工作,因为在那里页面往往会回到历史上的前一页。

$('html').on('keydown' , function(event) {

        if(! $(event.target).is('input')) {
            console.log(event.which);
           //event.preventDefault();
           if(event.which == 8) {
            //  alert('backspace pressed');
            return false;
         }
        }
});

returning false => both event.preventDefault and event.stopPropagation are in effect .

返回 false => event.preventDefault 和 event.stopPropagation 都有效。

回答by Rick Smith

The default behaviour for backspace on most browsers is to go back the the previous page. If you do notwant this behaviour you need to make sure the call preventDefault(). However as the OP alluded to, if you always call it preventDefault()you will also make it impossible to delete things in text fields. The code below has a solution adapted from this answer.

大多数浏览器上退格的默认行为是返回上一页。如果您希望这种行为,您需要确保调用preventDefault(). 然而,正如 OP 所提到的,如果你总是调用它,preventDefault()你也将无法删除文本字段中的内容。下面的代码有一个改编自这个答案的解决方案。

Also, rather than using hard coded keyCode values (some values change depending on your browser, although I haven't found that to be true for Backspace or Delete), jQuery has keyCode constantsalready defined. This makes your code more readable and takes care of any keyCode inconsistencies for you.

此外,jQuery没有使用硬编码的 keyCode 值(一些值会根据您的浏览器而变化,尽管我没有发现 Backspace 或 Delete 是真的),jQuery已经定义了keyCode 常量。这使您的代码更具可读性,并为您处理任何 keyCode 不一致的问题。

// Bind keydown event to this function.  Replace document with jQuery selector
// to only bind to that element.
$(document).keydown(function(e){

    // Use jquery's constants rather than an unintuitive magic number.
    // $.ui.keyCode.DELETE is also available. <- See how constants are better than '46'?
    if (e.keyCode == $.ui.keyCode.BACKSPACE) {

        // Filters out events coming from any of the following tags so Backspace
        // will work when typing text, but not take the page back otherwise.
        var rx = /INPUT|SELECT|TEXTAREA/i;
        if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
            e.preventDefault();
        }

       // Add your code here.
     }
});