11

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

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

2つ目は、非表示の入力を常にフォーカス（不良）にし、キーボードイベントで入力値の最後の文字を取得することですが、これは、書き込みが非常に遅い場合にのみ機能します。私のコードは次のようになります。

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();

これが実際の例です--http：//jsfiddle.net/YkaBm/1/-入力の下に同じ単語を取得する必要がありますが、少し速く書くと間違っていることがわかります。

キーボードイベントで実際の（正しい）文字を取得する方法、または入力キーアップイベントがこのように動作する理由についていくつかの提案がありますか？

アップデート！

コメントで述べたように、semir.babajicの答えは私の場合にはうまくいきませんでしたが、Semirのおかげで、このばかげた解決策がうまくいくことがわかりました。

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]);
    });
}
4

1 に答える 1

8

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

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

更新しました：

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

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

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

よろしく。

于 2013-01-10T09:11:50.093 に答える