如何讓我的光標/插入符號在輸入文本元素內移動？

Question

我正在嘗試構建一種與Google搜索頁面以及Gmail和其他幾個頁面（包括本頁面 - 請參閱Ask Question頁面上的「Tags」輸入）類似的表單。當輸入文本時，會出現一個選項列表，用戶可以使用向上和向下箭頭來選擇他們想要的選項。

我遇到的問題是向上箭頭將光標/插入符號放在字段的位置0處，並向下放在最後。有沒有簡單的方法讓它不能移動到開始/結束位置，還是需要在我的函數運行之前找到插入位置，然後將其重新定位到該位置？

這是在輸入元素（onkeyup）中輸入文本時運行的函數的開始。

var keycode = checkKeycode (event); // returns the keycode of the key pressed. 
if (keycode == 38) {   // up arrow 
    var selection = $(".optionsSelected").attr("id"); 
    var selId = parseInt(selection.replace('briefOption', '')); 
    if (selId != 0) { 
     $(".optionsSelected").removeClass("optionsSelected"); 
     var newSelId = selId - 1; 
     $("#briefOption"+newSelId).addClass("optionsSelected"); 
    } 
} 
else if (keycode == 40) {  // down arrow 
    var selection = $(".optionsSelected").attr("id"); 
    var selId = parseInt(selection.replace('briefOption', '')); 
    if (selId != numAvEmps && numAvEmps != 0) { 
     $(".optionsSelected").removeClass("optionsSelected"); 
     var newSelId = selId + 1; 
     $("#briefOption"+newSelId).addClass("optionsSelected"); 
    } 
} 
else if (keycode == 27) { // Escape 
    $("#docDropDown").css("display","none"); 
} 
else if (keycode == 9 || keycode == 13) {  //tab or enter 
    /* Fill form */ 
} 

讓我知道是否有更多的代碼會有用。謝謝您的幫助。

Answer 1

你會想在之前存儲脫字符號，然後當你完成所做的事情時，將其設置回來。

事情是這樣的：

HTML體：

<input type="text" id="mytextbox" style="border: 1px solid black" /> 

的Javascript：

function getCaretPosition(ctrl) 
{ 
    var caretPos = 0;  
    // IE 
    if (document.selection) 
    { 
     ctrl.focus(); 
     var sel = document.selection.createRange(); 
     sel.moveStart ('character', -ctrl.value.length); 
     caretPos = sel.text.length; 
    } 
    // Firefox 
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') 
    { 
     caretPos = ctrl.selectionStart; 
    } 

    return caretPos; 
} 

function setCaretPosition(ctrl, pos) 
{ 
    if(ctrl.setSelectionRange) 
    { 
     ctrl.focus(); 
     ctrl.setSelectionRange(pos,pos); 
    } 
    else if (ctrl.createTextRange) 
    { 
     var range = ctrl.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', pos); 
     range.moveStart('character', pos); 
     range.select(); 
    } 
} 



$(document).ready(function() 
{ 

    $("#mytextbox").keydown(function (e) 
    { 
     // Up 
     if(e.which == 38) 
     { 
      var pos = getCaretPosition(this); 

      // Do stuff here that changes the value/caret? 

      setCaretPosition(this, pos); 
     } 
     // Down 
     else if(e.which == 40) 
     { 
      var pos = getCaretPosition(this); 

      // Do stuff here that changes the value/caret? 

      setCaretPosition(this, pos); 
     } 

    }); 

}); 

Answer 2

只是阻止事件的默認操作。你可以，如果你使用的是事件處理程序屬性，而不是addEventListener/attachEvent，這將是最簡單的方法通過返回false做到這一點：

var input = document.getElementById("your_input"); 
var suppressKeypress = false; 

input.onkeydown = function(evt) { 
    evt = evt || window.event; 
    var keyCode = evt.keyCode; 
    if (keyCode == 38) { 
     // Do your stuff here 
     suppressKeypress = true; // For Opera; see below 
     return false; 
    } 
    // Other cases here 
}; 

// This bit is for Opera, which only allows you to suppress the default 
// action of a keypress in the keypress event (not keydown) 
input.onkeypress = function() { 
    if (suppressKeypress) { 
     suppressKeypress = false; 
     return false; 
    } 
};