[javascript] onKeyPress 중에 입력 텍스트 상자의 텍스트를 얻는 방법은 무엇입니까?

지금까지 완전한 솔루션을 제공하는 답변은 없습니다. 해결해야 할 몇 가지 문제가 있습니다.

1. 모든 키 누름이에 전달되지 않음 keydown및keypress 핸들러 (예 : 백 스페이스 및 삭제 키는 일부 브라우저에서 억제됨).
2. 손질 keydown 은 좋은 생각이 아닙니다. keydown으로 인해 keypress가 발생하지 않는 상황이 있습니다!
3. setTimeout() 스타일 솔루션은 사용자가 입력을 중지 할 때까지 Chrome / Blink 웹 브라우저에서 지연됩니다.
4. 마우스 및 터치 이벤트를 사용하여 잘라 내기, 복사 및 붙여 넣기와 같은 작업을 수행 할 수 있습니다. 이러한 이벤트는 키보드 이벤트를 트리거하지 않습니다.
5. 입력 방법에 따라 브라우저는 사용자가 필드를 벗어날 때까지 요소가 변경되었다는 알림을 전달하지 않을 수 있습니다.

더 정확한 해결책은 처리 할 keypress, keyup, input, 및 change이벤트를.

예:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

깡깡이:

http://jsfiddle.net/VDd6C/2175/

네 가지 이벤트를 모두 처리하면 모든 엣지 케이스를 포착합니다. 사용자의 입력으로 작업 할 때 모든 유형의 입력 방법을 고려하고 브라우저 간 및 장치 간 기능을 확인해야합니다. 위 코드는 내가 소유 한 모바일 장치뿐만 아니라 데스크톱의 Firefox, Edge 및 Chrome에서 테스트되었습니다.