JavaScriptの特定のキーのkeypressイベントを変更する

Question

私は、テキストボックス内で押された各キーの文字コードを表示するプロジェクトに取り組んでいます。

私の問題、すなわち時に特定のキー、ということである：私が押されたときにこれらのキーが彼らの正常な動作を維持したい16、8、32

：Shiftキー、バックスペース、スペースが押下されているように、その文字コードが表示されます。そのスペースはテキストボックス内にスペースを生じさせ、バックスペースは文字を削除します。そして、残りのキーは文字コードを出力し続けます。

これを行うにはどうしたらよいですか？

Answer 1

キーを確認してそれに応じて処理できます。ここではデモです：

document.getElementById("test-textbox").addEventListener("keypress", function(event) { 
 
    var code = event.keyCode || event.which; 
 
    
 
    if(code === 16 || code === 8 || code === 32) //check if space, shift, or backspace 
 
     return; //if yes, allow 
 
    
 
    console.log(code); //if not, log value 
 
    event.preventDefault(); //prevent entry 
 
});

<input type="text" id="test-textbox">

これは、シフト、バックスペース、およびスペースキーを押すことができるようになりますが、他のすべてが記録されます。

Answer 2

限り、あなた...

1. は、イベントオブジェクトのpreventDefaultメソッドを呼び出すことはありません、と
2. イベントハンドラ

からfalseを返しません...あなたがあるべきな良い。特に

、ハンドラ...

function showCharCode(event) { 
    // NOTE: Don’t call `event.preventDefault()` here. 
    document.querySelector('.char-code').textContent = event.charCode; 
    // NOTE: Don't return false here. 
} 

...まだデフォルトのテキストボックス（または入力、またはのcontentEditable）要素にイベントを伝播します。

Answer 3

これはあなたのために働くと思います。

var elementID = document.getElementById('elementID'); 

elementID.onkeydown = function(event) { 
    var key = event.keyCode || event.charCode; 

    if(key == 32 || key == 8) 
     event.preventDefault(); 
};