2015-01-09 22 views
4

我在寫一個基於contenteditable的小部件,它需要自行處理文本輸入。這是相當容易對付的ASCII和非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字符通過死鍵組合(比如,AltGr鍵例如),上述失敗慘不忍睹。喜歡谷歌文檔的花式編輯似乎在各種操作系統和瀏覽器中都能很好地處理這種情況,而不需要任何外部插件,所以很顯然,可能來自瀏覽器觸發的事件,以檢測從哪個字符生成死鑰匙的組成序列。但是,我一直無法弄清楚究竟如何(甚至對於單個瀏覽器/操作系統組合,比如說Chrome/Linux)都不知道。

因此,我的問題:有人會知道如何檢測當我們得到一個死鍵組合序列時,哪一個字符是從按鍵或keydown處理程序輸入?

回答

4

事實證明,我想要做的事情實際上是不可能的,因爲當前的DOM鍵盤事件API。需要做什麼的詳細說明可以在這裏找到:http://marijnhaverbeke.nl/blog/browser-input-reading.html

對於懶惰,它歸結爲創建一個隱藏的textarea,獲得焦點和所有鍵盤事件。組合字符必須通過解析textarea的內容並與之前的值進行比較來檢測。

2

看起來我不是唯一尋找它的人:) 我剛剛發現一些與組成狀態相關的事件可能適合您的需要。我使用它來阻止鍵盤事件,當我處於組合字符中間時。關鍵是要添加一個簡單的:

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/