2015-01-09 3 views
4

독자적으로 텍스트 입력을 처리해야하는 contenteditable 기반 위젯을 작성했습니다. 내가 예를 들어, 말 (죽은 키 구성을 통해 AltGr 키를 입력 비 ASCII 문자로 내 로컬 시스템을 구성하는 경우,구성된 문자를 감지하여 일부를 무시합니다.

container_element.addEventListener('keypress', function(event) { 
    if (event.ctrlKey || event.altKey || event.metaKey) { 
     return; 
    } 
    if (event.which != 0 && event.charCode != 0) { 
     event.preventDefault(); 
     var c = String.fromCharCode(event.which); 
     handle_character(c); 
    } 
}); 

지금 :이 같은 뭔가 ASCII와 비 ASCII 문자를 모두 처리하는 매우 간단합니다), 위의 비참하게 실패합니다. Google 워드 프로세서와 같은 화려한 편집자는 외부 플러그인을 필요로하지 않고 다양한 OS 및 브라우저에서이 사례를 상당히 잘 처리 할 수 ​​있습니다. 브라우저 발생 이벤트에서 입니다. 데드 키의 합성 순서.

그러나 정확히 어떻게 하나의 브라우저/OS 조합 (예 : Chrome/Linux)이 있는지 알 수 없었습니다.

내 질문 : 누구 죽은 키 구성 시퀀스를받을 때 어떤 문자가 keypress 또는 keydown 처리기에서 입력되는 감지하는 방법을 알고 있습니까?

답변

4

현재 DOM 키보드 이벤트 API가 주어진다면 내가하고 싶은 것은 사실상 불가능하다는 것이 밝혀졌습니다. 수행해야 할 작업에 대한 자세한 설명은 여기에서 확인할 수 있습니다.

게으른 사람들에게는 포커스와 모든 키보드 이벤트를 가져 오는 숨겨진 텍스트 영역을 만드는 것이 중요합니다. 합성 문자는 텍스트 영역의 내용을 구문 분석하고 이전 값과 비교하여 감지해야합니다.

2

나는 그것을 찾고있는 유일한 사람이 아닌 것 같습니다 :) 방금 ​​당신의 필요에 맞는 구성 상태와 관련된 많은 이벤트를 발견했습니다. 나는 내가 구성된 char의 중간에있을 때 키보드 이벤트를 차단하는데 사용한다.

var block = false; 
input.addEventListener('compositionstart', function() { block = true; }); 
input.addEventListener('compositionend', function() { block = false; }); 

와 입력 이벤트 내 코드에서 나중에 사용할 :

input.addEventListener('input', function() { 
    if (block) { return; } 
    console.log(input.value); 
}); 

데모 : http://jsfiddle.net/kde4gvxn/1/

의 핵심은 단순한를 추가하는 것입니다
관련 문제