javascript - 在自动完成选择期间禁用光标移动

Question

我需要在自动完成选择期间禁用光标移动。我有一个 contentEditable div 作为 friend 的搜索栏。当我输入任何字母时，搜索栏下方会出现自动完成建议。在选择自动完成建议时，我需要使用箭头键进行选择。但这也会将光标移动到搜索栏上，并且还会禁用搜索栏中的任何当前选择。我可以以某种方式禁用 javascript 键盘上某些特定按钮/键的光标移动吗？

注意:

• 将光标设置在最后一个位置对我来说不是解决方案。
• 我想禁用左、右、上、下箭头键和回车键

Answer 1

您可以在按键事件上调用 preventDefault()，这些事件的键码对应于箭头键或返回键。这将防止光标移动。

在按下事件期间，event.keyCode 属性将等于以下内容:

• 37:左
• 38:向上
• 39:对
• 40:向下
• 13:返回

因此，您可以将事件监听器附加到您的 div 并在自动完成建议处于事件状态时取消这些事件:

var autoCompleteOn = false; //Set this flag in an auto-complete handler
yourDiv.addEventListener("keydown",function(e){
                       //v------all arrow keys------------v     v---Return----v
  if(autoCompleteOn && ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13)){
    e.preventDefault();
    return false;
  }
}, false);

注意:为了简单起见，我使用了 addEventListener，但为了兼容性，您还必须使用 attachEvent 或 onkeydown。

示例 jsFiddle .