입력 필드, 외부 키보드, 커서 위치에서 쓰기가 깨졌습니다.

Question

일부 입력 필드를 채우기 위해 외부 키보드를 사용해야합니다. 필드의 특정 위치에 커서를 놓을 수있는 사용자가 있어야하며 그 위치에서 텍스트가 계속되어야합니다.

selectionStart를 사용할 때 텍스트 필드에 커서 위치를 가져 오는 데 문제가 있음을 발견했습니다.

아래 코드는 textfield의 끝에 숫자를 추가하는 대신 inp.selectionStart가 0을 반환하기 때문에 처음에 추가됩니다.

흥미롭게도 필자는 ifp.focus(); 그런 다음에 값의 끝에 숫자를 추가하지만 문자열 내 특정 장소를 클릭하면 다시 제동 다음 번 잘 작동하고 그리고 점프 할 때 더 나은 일하고 0

let inp; 
 
let btn; 
 
let dig = 0; 
 

 
document.addEventListener("DOMContentLoaded", init); 
 

 
function init() { 
 
    inp = document.getElementById('inp'); 
 
    btn = document.getElementById('btn'); 
 

 
    btn.addEventListener("click", add_digit); 
 

 
    inp.focus(); 
 
} 
 

 
function add_digit() { 
 
    const caretPos = inp.selectionStart; 
 
    console.log('caretPos', caretPos) 
 

 
    inp.value = inp.value.substring(0, caretPos) + (++dig%10) + inp.value.substring(caretPos); 
 
    
 
    inp.setSelectionRange(caretPos+1, caretPos+1) 
 
}

<input id="inp" /> 
 
<button id="btn">add digit</button>

Answer 1

add_digit() 함수의 끝에 inp.focus()를 추가하면 여기에서 스 니펫의 기능을 달성하는 데 도움이된다는 것을 알았습니다.

let inp; 
 
let btn; 
 
let dig = 0; 
 

 
document.addEventListener("DOMContentLoaded", init); 
 

 
function init() { 
 
    inp = document.getElementById('inp'); 
 
    btn = document.getElementById('btn'); 
 

 
    btn.addEventListener("click", add_digit); 
 

 
    inp.focus(); 
 
} 
 

 
function add_digit() { 
 
    const caretPos = inp.selectionStart; 
 
    console.log('caretPos', caretPos) 
 

 
    inp.value = inp.value.substring(0, caretPos) + (++dig%10) + inp.value.substring(caretPos); 
 
    
 
    inp.setSelectionRange(caretPos+1, caretPos+1); 
 

 
    inp.focus(); 
 
}

<input id="inp" /> 
 
<button id="btn">add digit</button>