>  기사  >  웹 프론트엔드  >  JavaScript_javascript 팁에서 IME 키보드 입력 이벤트 듣기

JavaScript_javascript 팁에서 IME 키보드 입력 이벤트 듣기

WBOY
WBOY원래의
2016-05-16 18:06:191234검색

입력 방법은 키보드 이벤트를 어떻게 트리거해야 합니까? 모든 키 입력에 대해 이벤트가 트리거됩니까, 아니면 단어 선택이 완료된 후에만 이벤트가 트리거됩니까? 전체 문장 입력이 어떻게 이벤트를 트리거할 수 있나요? 운영체제와 브라우저마다 이에 대해 서로 다른 견해를 가지고 있습니다. 최악의 경우, 브라우저는 사용자가 입력 방법을 사용한 후 한 번만 keydown을 트리거하고 키보드 이벤트가 없습니다. 제안 컨트롤은 텍스트 입력 상자의 변경 사항을 모니터링해야 하며 이벤트는 폴링을 사용하는 경우 가장 정확하고 계산적으로 효율적인 방법이므로 제안 컨트롤 구현에 큰 문제가 됩니다.
우선 입력 방법을 활성화한 후 키 입력 이벤트를 모니터링하려면 keydown 이벤트를 사용해야 합니다. 입력 방법이 활성화된 후에는 다른 키보드 이벤트가 트리거되지 않을 수 있기 때문입니다. 둘째, 대부분의 운영 체제와 브라우저는 사실상의 표준을 구현했습니다. 즉, 사용자가 입력 방법을 사용하여 입력할 때 keydown 이벤트에 전달되는 keyCode 값은 229입니다. 그러나 키 누르기를 실행하는 빈도는 확실하지 않습니다. 어떤 경우에는 키를 누를 때마다 이벤트가 실행되고, 다른 경우에는 단어 선택이 완료된 후에만 이벤트가 실행됩니다. 이때 텍스트 상자의 내용 변경을 실시간으로 모니터링하려면 폴링을 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

var 타이머
var imeKey = 229;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey) {
timer = setInterval(checkTextValue, 50)
} else {
checkTextValue ();
}
}
function checkTextValue() {
/* 입력 텍스트 변경 처리 */
}

Opera는 재미있습니다. browser 남들이 하는 일은 아무것도 하지 않고, 남들이 하지 않는 일을 하는 것을 좋아합니다. 예를 들어, keyCode == 229라는 사실상의 표준을 지원하지 않지만, keyCode == 197을 사용하여 입력 방법의 사용을 나타냅니다. 따라서 위의 코드를 기반으로 몇 가지 개선이 필요합니다. Opera 브라우저가 감지되면 비교를 위해 keyCode 상수를 변경합니다.
var imeKey = (UA.Opera == 0) ? 229 : 197;
마지막으로 Mac용 Firefox라는 브라우저가 있습니다. Mac 버전은 Mozilla에게 너무 중요하지 않은 것으로 추정되므로 많은 Windows 버전이 문제가 없는 Mac 버전에서는 위 이벤트에 대한 지원 등 사소한 문제가 있을 것입니다. Mac용 Firefox에는 keyCode == 229가 없으며 입력 방법이 활성화된 후 첫 번째 키 입력만 keydown 이벤트를 트리거하므로 키 입력 후에만 폴링을 사용할 수 있습니다.
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
이 두 가지 개선 사항을 추가한 후에는 텍스트 상자 변경 사항에 대한 실시간 모니터링이 더 이상 지원되지 않습니다. 가능 사용자가 입력 방법을 활성화한 경우에도 문제가 발생합니다. 전체 코드는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.

var 타이머;
var imeKey = (UA.Opera == 0) ? 229 : 197;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
timer = setInterval(checkTextValue, 50)
} else {
checkTextValue()
}
function checkTextValue( ) {
/* 입력 텍스트 변경 처리 */
}

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.