キーボードイベントで正しい文字を取得する

Question

私はユーザーがキーボードに入力する最後の文字を取得する必要がある小さな単語ゲームを作っています。私はこれを行う2つの方法を考え出しました。

最初に、ドキュメントのキーボードイベントをリッスンし、キーコードで取得することによって各文字を取得します。キーボードのデッドキー（Âなど）で文字を書き始めるまではうまく機能しました。 String.fromCharCode（e.keyCode）はAのkeyCodeをAに変換するのでAに変換しますが、イベントに生成されたデッドキーまたは実際のcharに関するイベントには何もないようです。

第2の問題は、隠れた入力を常に集中的に（悪い）、キーボードイベントで入力値の最後の文字を取得することです。私のコードは次のようになります。あなたは、入力以下同じ単語を取得する必要がありますが、あなたは少し速く、それは間違って判明書くとき - - http://jsfiddle.net/YkaBm/1/ここ

function is_char(e){ 
    return (!e.ctrlKey && !e.altKey && !e.metaKey && 
         (e.keyCode >= 65 && e.keyCode <= 90) || 
         (e.keyCode >= 97 && e.keyCode <= 122) 
       ); 
} 
$('#fake_input').on('keyup', function(e){ 
    if (is_char(e)){ 
    $('#result').append(this.value[this.value.length - 1]); 
    } 
}).focus(); 

例を進めています。

キーボードイベントで実際の（正しい）文字を取得する方法や、入力キーアップイベントがこのように動作する理由を教えてください。

更新！

私は私の場合にはかなりの仕事をしませんでしたが、私はこの愚かな解決策が機能することがわかっセミールに感謝のコメントsemir.babajicの回答で述べたように：

function is_char(e){ 
    return (!e.ctrlKey && !e.altKey && !e.metaKey && 
         (e.keyCode >= 65 && e.keyCode <= 90) || 
         (e.keyCode >= 97 && e.keyCode <= 122) 
       ); 
} 
var x = 0; 
$('#fake_input').on('keyup', function(e){ 
    if (e.keyCode === 8){ 
    x--; 
    } 
    else if (is_char(e)){ 
    x++; 
    $('#result').append(this.value[x-1]); 
    } 
}).focus(); 

が、私はまだ方法を見つけるのが大好きです入力フォーカスを維持することは良い解決策ではないように見えるので、$（document）キーボードイベントのいずれかを使用してキーボードイベントから実際の文字を取得することができます。

更新2！

ちょうど誰にも同様の問題を持っている場合には、私はこのソリューションに最高のを見つけました：

App.insert_char = function(c){ 
    if (c && c.toUpperCase() != c.toLowerCase()){ 
     console.log(c); 
    } 
}; 

if ('oninput' in $('#fake_input')[0]){ 
    $('#fake_input').on('input', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 
else if ('onpropertychange' in $('#fake_input')[0]){ 
    $('#fake_input').on('propertychange', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 
else if ('ontextInput' in $('#fake_input')[0]){ 
    $('#fake_input').on('textInput', function(e){ 
     App.insert_char(this.value[this.value.length - 1]); 
    }); 
} 

Answer 1

この行は、「ボトルネック」引き起こしていた：this.value[this.value.length - 1]を、それは単に遅かったです。

代わりにこれを試してみてください：

更新日：

$('#fake_input').keypress(function(e){ 
    $('#result').append(String.fromCharCode(e.which) + '<br />'); 
}).focus(); 

説明。 keyupの代わりにkeypressを使用して文字をトラップするとします。 keyupは文字とは何の関係もないことに注意してください。受信したキーボード信号のキーコードのみを表示します。 keypressを使用すると、文字のキーコードが取得されるため、大文字と小文字を区別できます。

http://jsfiddle.net/YkaBm/8/

よろしく。