如何让我的光标/插入符号在输入文本元素内移动？

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; 
    } 
};