Question

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

注意：

将光标设置在最后位置不是我的解决方案。
我想禁用左，右，上，下箭头键以及回车键

Answer 1

您可以在具有与箭头键或返回键对应的键码的keydown事件上调用preventDefault()。这将阻止光标移动。

在keydown事件期间，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。

Answer 2

你使用jquery吗？

如果是这样你应该试试这个

$("#whatever").bind("keypress", function(e) {
  if (e.keyCode >36 && e.keyCode <41) return false;
});

搜索所有密钥的javascript密钥

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

2 个答案: