如何检测Mac系统两种删除键的keydown事件？解决Safari触发问题

哎，这可是Safari的经典坑了！我之前也遇到过一模一样的情况——Mac键盘上的两个删除键（向后删的Backspace、向前删的Forward Delete）在Safari里经常不会触发keydown或keypress事件。给你两个靠谱的解决办法：

方案一：改用input事件（强烈推荐） #

input事件是专门用来监听输入框内容变化的，不管是打字、删除、粘贴、拖拽文本进来，甚至是语音输入，只要内容变了就会触发。它在所有浏览器（包括Safari）里表现都很稳定，而且覆盖的场景比只监听按键要全面得多。

把你的代码改成这样就行：

$(".panelText").on("input","textarea",function() {
  console.log("文本框内容已修改！");
  var textID = $(this).closest('.text').attr('id');
  $('#'+textID).find('.saveText').addClass('textChanged');
});

这个方案不仅解决了Safari删除键的问题，还能捕获用户所有可能修改文本的操作，让你的保存提醒功能更可靠。

方案二：兼容keydown的写法（如果必须保留keydown） #

如果你一定要用keydown事件，可以通过检查按键的key属性来精准捕获删除键。在Safari中，Backspace键的key值是"Backspace"，Forward Delete键的key值是"Delete"，你可以在回调里加上判断：

$(".panelText").on("keydown","textarea",function(e) {
  // 检测两种删除键
  const isDeleteKey = e.key === "Backspace" || e.key === "Delete";
  
  // 对删除键或其他按键触发保存提醒
  if (isDeleteKey) {
    console.log("删除键被按下！");
    var textID = $(this).closest('.text').attr('id');
    $('#'+textID).find('.saveText').addClass('textChanged');
  } else {
    console.log("文本框内按键触发！");
    var textID = $(this).closest('.text').attr('id');
    $('#'+textID).find('.saveText').addClass('textChanged');
  }
});

不过要提醒你，有些旧版本的Safari可能还是不会为这两个键触发keydown事件，所以input事件的方案依然是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Banjobum