尝试防止在Mac键盘上输入死键

Question

我正在尝试使用组合键 alt+i 创建一个快捷方式，通常情况下会输入一个代表重音符的按键 ˆ，我尝试了以下方法：

$(document).ready(function () {
    $("#txtInput").keydown(
       function (event) {
           if (event.which == 229 && event.altKey === true) {
               alert(event);
               event.preventDefault();
               event.stopPropagation();
           }
       }
   ); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="txtInput" type="text" />

条件语句内的代码会执行，但是ˆ仍然会被输入到"#txtInput"中。 有没有办法防止这段文本被输入？

- Kareem Mohsen

---

添加了一个答案。 - Aaron

Answer 1

在搜索防止在MacOS上输入文本时输入'等组合键以获取特殊字符（例如ā，ē，ī等）的方法时，我看到了这篇文章。没有任何一种解决方案能够像OP所说的那样防止浏览器/操作系统启动字符组合。我发现一个hacky的方法是在Dead按键按下时模糊输入，然后在微不足道的延迟后再次聚焦它。在我的情况下，这比通过操作event.target.value在事后删除输入的符号导致的闪烁要少。

const input = document.getElementById('input')

input.addEventListener('keydown', e => {
  console.log(e.key)

  if (e.key === 'Dead') {
    input.blur()
    setTimeout(() => input.focus())
  }
})

<input id="input" type="text">

这也将防止下一个特殊字符 ' 被转换并出现在输入中。

- Kaspars Putniņš

Answer 2

这非常依赖于键盘布局，可能不是通用的解决方案，但您可以尝试以下方法使ALT + I快捷键生效：

function custom() {
  console.log('The short-cut executed');
}
let isDead = false;
document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyI') {
    custom();
    e.preventDefault();
  };
  if (isDead) {
    e.preventDefault();
  }
  isDead = (e.key === 'Dead');
});

<input>

死键本身无法防止，但是可以防止死键后产生的字符。由于许多键盘事件的属性现在已被弃用，该代码使用相对较新的code属性，它会给出被按下的物理键的代码。

---

编辑

由于MacOS似乎拒绝阻止死键的默认操作，您可以使用两个事件，一个在document上触发快捷方式，另一个在输入框（或者也可以在document上）清除插入符号（或任何不需要的字符）。

function custom() {
  console.log('The short-cut executed');
}

// KeyDown for triggering the shortcut
document.addEventListener('keydown', e => {
  if (e.altKey && e.code === 'KeyI') {
    custom();
  };
});

// Input for removing the dead key characters
$(document).on('input', 'input', e => {
  e.target.value = e.target.value.replace(/\^/g, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input>

两个事件都是必需的，因为当触发 keydown 事件时，输入框的值尚未更新。另一方面，input 事件的事件对象没有 key/code 属性。

- Teemu

---

这个也不起作用。e.preventDefault();似乎根本没有起到任何作用。 - Kareem Mohsen

这也不是最优解，因为在我的Windows机器上，按下^键超过一次仍然允许我输入它。这是一个相当棘手的问题。 - Aaron

@Aaron 我无法重现这个问题，在我的键盘上，插入符号是通过 SHIFT + ^（斯堪的纳维亚键盘）输入的。 - Teemu

谢谢！这很有帮助。我可以将此用作其他热键的示例，但唯一的问题是输入字段仍然键入ˆ，同样适用于我的键盘布局上的所有其他死键{alt+e，alt+u，alt+n，alt+`}。 - Kareem Mohsen

这个对我在Windows和Mac上都有效。Angular实现：https://stackblitz.com/edit/angular-ivy-bjkrrk?file=src/app/only-numbers.directive.ts - Allan Juan

Answer 3

只需将事件的关键字与'i'进行比较，如果相等，就感觉是最自然的解决方案。

$('#txtInput').keydown(function(e){
   if( e.altKey && e.key == 'i'){
     e.preventDefault();
     console.log("Blocked");
  }        
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtInput">

- Aaron

---

好的，问题要求解决方案来阻止alt+i键组合，这正是它所做的。我会编辑我的答案，不用担心 :) - Aaron

在这种情况下，关键字实际上是"Dead"而不是"i"，即使检查了关键字，它也无法正常工作。请注意，条件中的代码已执行，但event.preventDefault()似乎没有产生任何效果，这就是问题所在。 - Kareem Mohsen

这与键盘布局有关。我无法重现你的错误。在我的端上，alt+i根本没有任何作用。也许你可以编辑你的问题，明确说明正在发生什么以及你想要防止什么。 - Aaron

我刚在我的Windows机器上尝试了你的代码片段，它可以正常工作，所以我认为这个问题可能是与MacBook键盘布局有关。 - Kareem Mohsen

请前往该网站，检查在按下 i 和 alt 键后 event.key 是什么，并根据您的需求编辑我的代码片段。 - Aaron

Answer 4

我会将密钥与实际字符进行比较，例如：

$("#txtInput").keydown(
  function (event) {
    if (('Ii'.indexOf(String.fromCharCode(event.which)) >= 0) && event.altKey === true) {
      console.log('Here you go');
      // Do stuff here 
      event.preventDefault();
      event.stopPropagation();
    }
  }
);

- Lajos Arpad

---

你也可以直接使用 event.key 并将其与 i 进行比较。看看我的代码片段，同样有效。 - Aaron

在这种情况下，关键字实际上是"Dead"而不是"i"，即使检查了关键字，它也无法正常工作。请注意，条件中的代码已执行，但event.preventDefault()似乎没有产生任何效果，这就是问题所在。 - Kareem Mohsen