如何使用jQuery捕获退格键？ [复制]

Posted 2023-05-07

【中文标题】如何使用jQuery捕获退格键？ [复制]

【英文标题】：How to trap the backspace key using jQuery? [duplicate]

【发布时间】：2011-06-23 13:37:28

【问题描述】：

当按下退格键时，不会触发 jQuery keyup、keydown 或 keypress 方法。如何捕获退格键的按下？

【问题讨论】：

只是为了澄清，我想在按下退格键并采取行动时进行陷阱。当从文本框中删除最后一个字符时，我正在更改页面上某些按钮的启用状态。因此，我仍然希望退格键执行其正常操作。

这不是真的。它出现在 keyup 和 keydown 方法中。只是不会出现在按键中。

@RickSmith 我不同意。您所指的问题是在 javascript 中，而这里的 OP 是在 jQuery 中提出的。有人希望以一种或另一种方法得到答案可能是有原因的。

@RacilHilan 你是对的，这不应该是重复的。

【参考方案1】：

试试这个：

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

【讨论】：

同时检查 46（删除）

它可以工作，但你不能以这种方式显示模态窗口并停止返回上一页。

尝试 e.preventDefault() 然后做一个不确定的事情:)

阻止转到上一页以及使用 jQuery keyCode 常量 below 的完整代码示例。

【参考方案2】：

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

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

如果您想同时检查 [delete] (46) 和 [backspace] (8) 键，请使用以下命令：

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

【参考方案3】：

与上面的想法相同，但概括了一点。 由于退格应该在输入元素上正常工作，但如果焦点是段落或其他内容，则不应该工作，因为它在那里页面倾向于返回到历史上的前一页。

$('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 => event.preventDefault 和 event.stopPropagation 都有效。

【讨论】：

支持 Keydown 而不是 keyup。

【参考方案4】：

大多数浏览器上退格的默认行为是返回上一页。如果你确实不想要这种行为，你需要确保调用preventDefault()。但是，正如 OP 所暗示的那样，如果您始终将其称为 preventDefault()，您也将无法删除文本字段中的内容。下面的代码有一个改编自this answer 的解决方案。

另外，jQuery has keyCode constants 已经定义，而不是使用硬编码的 keyCode 值（某些值会根据您的浏览器而变化，尽管我还没有发现 Backspace 或 Delete 是正确的）。这使您的代码更具可读性，并为您处理任何 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.
     
);

【讨论】：

这可以处理大多数情况，但我想防止在 Select 和某些输入类型（如单选或复选框）上返回，所以我删除了 SELECT 并在 e.target.type 上添加了一个测试。到目前为止，我有这些输入类型var rxt = /radio|button|checkbox|image|reset|submit/i; 颜色也可能是要排除的一种，但这可能是特定于浏览器的。

更新：Chrome 禁用了此功能并将上一页快捷方式移至 ALT + 左箭头。现在无法测试其他浏览器。