在自動完成選擇期間禁用光標移動

我需要在自動完成選擇期間禁用光標移動。我有一個contentEditable div作爲朋友的搜索欄。當我輸入任何字母時，搜索欄下方會出現自動完成建議。在選擇自動完成建議期間，我需要使用箭頭鍵進行選擇。但是，這也會將光標移動到搜索欄上，並且還會禁用搜索欄中的任何當前選擇。我可以以某種方式禁用鍵盤上的某些特定按鈕/鍵在JavaScript中的光標移動？在自動完成選擇期間禁用光標移動

注：

在最後位置設置光標不是我一個解決方案。
我想禁用左，右，向上，向下箭頭鍵，也回車鍵

來源

2011-08-01 einstein

你可以有一個鍵碼的keydown事件對應於箭頭鍵或回車鍵調用preventDefault() 。這將防止光標移動。

的event.keyCode屬性將等於一個keydown事件期間執行以下操作：

37：左
38：最多
39：右
40：向下
13：Return

所以，你可以附加一個事件監聽器到你的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。

來源

2011-08-01 14:08:59

你用jQuery嗎？

如果是的話，你應該試試這個

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

搜索JavaScript的鍵代碼，所有按鍵

來源

2011-08-01 14:10:27 JSantos

在自動完成選擇期間禁用光標移動

回答

相關問題