커서/캐럿이 입력 텍스트 요소 내부에서 움직이지 않게하려면 어떻게합니까?

Question

Google 검색 페이지와 유사한 방식으로 작동하는 양식과 Gmail 및 여러 다른 페이지 (이 페이지 포함 - 질문 질문 페이지의 "태그"입력 참조)를 작성하려고합니다. 텍스트가 입력되면 옵션 목록이 표시되고 사용자는 위/아래 화살표를 사용하여 원하는 옵션을 선택할 수 있습니다.

내가 겪고있는 문제는 위 화살표가 커서/캐럿을 필드의 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" /> 

자바 스크립트 :

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