2012-07-06 20 views
25

入力フィールドが1つしかないため、onChangeおよびonKeyPressイベントを登録して、ユーザーが入力を完了したときまたはEnterキーを押すと検出します。私はJavaScriptを使用する必要があります。助けてくれてありがとう。ユーザーが入力フィールドでEnterキーを押したときの検出方法

私が持っている:ここでは

var load = function(){ 
    //I want to trigger this function when user hit Enter key. 
} 

document.getElementById('co').onchange=load; //works great 
document.getElementById('co').onKeyPress=load; 
//not sure how to detect when user press Enter 

HTML

//no form just a single input field 
<input type='text' id='co'> 
+0

[JavaScriptでキープレスイベントを入力してください](http://stackoverflow.com/questions/905222/enter-key-press-event-inの可能性のある重複-javascript) – Bae

答えて

53
document.getElementById('foo').onkeypress = function(e){ 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '13'){ 
     // Enter pressed 
     return false; 
    } 
    } 

DEMO

+0

追加質問です。ユーザーがEnterキーを押したことを検出したら、foo要素にアクセスするにはどうすればよいですか?このキーワードは使用できません。ウィンドウオブジェクトを参照しています。ありがとうたくさん – FlyingCat

+0

'this.value'はうまくいくはずです。私のデモではします。 – sachleen

+7

厳密に等しい場合は 'if(keyCode === 13)'を使用します – bobbyrne01

8

が既にありevent.keyCode

var code = (e.keyCode ? e.keyCode : e.which); 
if(code == 13) { //Enter keycode 
    //Do something 
} 

を使用します。

document.getElementById('foo').onkeypress = function(e) { 
    var event = e || window.event; 
    var charCode = event.which || event.keyCode; 

    if (charCode == '13') { 
     // Enter pressed 
     return false; 
    } 
} 

はこれを参照してください。詳細は質問:javascript event e.which?

0

私はこのコードを使用し、それが正常に動作しません:特にこの質問に答えるまだのように、これらの答えの

document.getElementById("theIdHere").onkeypressed = 
function() { 
    if(this.event.which === 13) 
     console('passed'); 
} 
2

はなし。問題は2つの部分に分かれています。 1. Enter is Pressedを押します。 2.用途は入力に焦点を当てています。

$('#input-id').on("keyup", function(e) { 
    if (e.keyCode == 13) { 
     console.log('Enter'); 
    } 
}); 

この方法では、ユーザーがこの入力からFROMを入力したときにのみENTERが検出されます。

1

もっと最近のクリーナー:の代わりにevent.keyを使用してください。 これ以上の任意の番号コードはありません!

const node = document.getElementById('co'); 
node.addEventListener('keydown', function onEvent(event) { 
    if (event.key === "Enter") { 
     return false; 
    } 
}); 

Mozilla Docs

Supported Browsers

関連する問題