"위쪽 화살표"키를 사용하지 못하도록 텍스트 상자 내의 커서 위치 재설정

Question

최근에 지원하는 웹에 일부 예측 텍스트 입력 필드가 추가되었습니다.

큰 거래가 맞습니까? 웹 앱이이 작업을 수행하지 않는 것처럼 보이지는 않습니다. 이미 시간을 보지 못하고 최종 사용자가 불평하고있는 것처럼 보입니다. (적어도 그것은 그것이 여기에있는 방법입니다).

그래서 내 질문은 "위쪽"화살표 키와 관련이 있습니다.

예측 텍스트 상자에는 청취자 onkeyup이 있습니다.

핸들러는 키 스트로크를 분리하고 사용자가 입력 한 문자에 따라 작업을 수행합니다.

위쪽 화살표 키를 사용하면 "제안"이로드 된 div에서 탐색 할 수 있습니다. 인덱스를 추적하는 변수가 여러 개 있습니다. 기본적으로 사용자가 위쪽 화살표를 눌렀을 때 해당 div가있는 것처럼 보이게하는 일부 CSS가있는 ID로 div의 ID를 변경합니다. 선택된. 또한 해당 div 값을 잡고 사용자가 입력 할 수있는 텍스트 상자에 할당합니다.

문제는 미적인 것입니다. 본질적으로 내가 배우는 모든 텍스트 상자에서 위쪽 화살표 키는 커서 위치를 재설정합니다. 이것은 텍스트 필드에 새 값을 쓰기 직전입니다.

그래서 위쪽 화살표가 하나씩 깜박 거리면 사용자는 텍스트 상자에서 점프 커서를 보게됩니다 (시작 부분으로 건너 뛰고 끝 부분에 즉시 나타남).

여기에 코드입니다 -

if (event.keyCode === 38 && currentUserInput.length > 0) { 

    // user has toggled out of the text input field, save their typing thus far 
    if (currentToggledIndex == -1) { 
     currentToggledIndex = autoFillKeywordsList.length-1; 
     savedKeywordUserInput = currentUserInput; 
    } 
    else { 
     // revert currently selected index back to its original id 
     document.getElementById("kw_selected").id = "kw_" + currentToggledIndex ; 

     // user has toggled back into user input field 
     if (currentToggledIndex == 0) { 
      currentToggledIndex = -1; 
     } 

     // user has toggled to the next suggestion 
     else { 
      currentToggledIndex--; 
     } 
    } 
    // 2. Determine next action based on the updated currentToggledIndex position 
    // revert the user input field back to what the user had typed prior to 
    // toggling out of the field 
    if (currentToggledIndex == -1) { 
     element.value = savedKeywordUserInput; 
    } 
    // mark the toggled index/keyword suggestion as "selected" and copy 
    // its value into the text field 
    else { 
     document.getElementById("kw_"+currentToggledIndex).id = "kw_selected";    
     element.value = autoFillKeywordsList[currentToggledIndex]; 
    } 
    // 3. Determine what the user can do based on the current value currently 
    // selected/displayed 
    displayAppropriateButtonActions(element.value); 
} 

재미있는 것은이 -에 의해 아래쪽 화살표 키 현재 텍스트 상자에있는 문자열의 끝 부분에 커서를 배치합니다 기본부터 "아래"화살표는 완벽하게 작동합니다.

좋아, 나는 이미 시도 가지도록 -

event.preventDefault(); event.stopPropogation();

는 또한 PRIOR 내가 다른에서 발견 setCursorPosition 기능을 사용하여 아무 소용이 새 값을 설정 커서의 위치를 ​​설정하려 게시물 here. (그래, 내가 이걸 가지고 도달했다)

나는 이것을 JavaScript와 Jquery로 표시했다. 나는 JavaScript를 사용하는 것을 선호하지만, Jquery에서도 제안을 열어 놓는다!

Answer 1

당신이 할 수있는 것은 커서를 움직여서 어떤 요소인지 알아내는 것입니다 ... 변수에 저장하고 포커스()하고 지우고 저장 한 값을 넣으십시오. 다시 그걸로.

var holdme = $("#myelement").val(); 
$("#myelement").focus().val('').val(holdme); 

jquery/javascript에서 이상한 커서 문제가있을 때마다 유용합니다. 시도해 보시고 효과가 없다면 저에게 알려주십시오. 그러면 내가 뭘 잘못했는지 알게 될 것입니다.

Answer 2

Ryan이 제안했습니다. 각도 4.x에서이 점을 얻은 방법은

입니다.HTML

<.. (keydown)="keyDownEvent($event)" > 

.TS

keyDownEvent(event: any){ 

if (event.keyCode === 38 && event.key == "ArrowUp") 
{ 
event.preventDefault(); 
//logic.. 
}