2012-04-17 9 views
1

私は、キャリッジリターンの処理、テキストボックスからの入力のクロスブラウザソリューションを探しています。キャリッジリターンのクロスブラウザkeydown処理?

私の現在の問題は、私はjqueryのを使用することができます

<input id="myinput" type="text" onkeydown="press();" value="X"/> 

<script type="text/javascript"> 
function press() { 
    if (event.keyCode == 13) { 
    // do something 
    } 
} 
<script> 

が定義されていないjavascriptのイベントのfirefox ...

です。

+2

jQueryを使用できる場合は、インラインアトリビュートを使用するのではなく、イベントハンドラをアタッチするためにjQueryを使用する必要があります。 –

答えて

8

eventはどこから来たのですか?

// First, change the HTML to: 
<input id="myinput" type="text" onkeydown="return press(event);" value="X" /> 

// Then, on the JS part: 
function press(e) { 
    var evt = e || window.event 
    // "e" is the standard behavior (FF, Chrome, Safari, Opera), 
    // while "window.event" (or "event") is IE's behavior 
    if (evt.keyCode === 13) { 
     // Do something 

     // You can disable the form submission this way: 
     return false 
    } 
} 

注意するときのデフォルトの動作である(提出からフォームを防ぐために、この機能でreturnの使用とHTMLイベントを:ここに:-)

は、あなたが探しているソリューションです。フォームのフィールドで[Enter]を押してください)。

しかし、私はHTMLにJavaScriptの一部を除去することをお勧めしたい、としてまっすぐ行く:

document.getElementById('myinput').onkeydown = function(e) { 
    // Your code 
} 

これはthis'dも、あなたはjQueryの方法についてはunobtrusive javascript

を持つことができます次

$('#myinput').on('keydown', function(e) { 
    // jQuery normalizes the "e" parameter, so you can use: 
    if (e.keyCode === 13) { 
     // Do something 
    } 
}) 

PS:eventは実際にIEの正しい使用であるwindow.eventと同じです。これは他のブラウザ(FF、Chromeなど)が使用する標準ではありません。だから私たちが提供したトリック(var evt = e || window.event、ここではeが引数として渡されました)を使用しています。

+0

+1素晴らしい答えが、より完全かもしれません。(HTMLの 'onkeydown'属性に関数引数の定義がありません;' return false'を使ってブラウザのデフォルト動作を無効にすることをお勧めします) – Kaii

+0

ありがとう、編集: –

+0

FTFY、 'onkeydown' HTML属性の' return'がまだありません。 (関数からの 'return false'はそうでなければ無視されます) – Kaii

0
$('#myinput').keypress(function(e){ 
     if(e.which == 13){ 
     //do something. 
     e.preventDefault(); 
     } 
}); 
0

あなたは、あなたの関数に渡されるイベントパラメータを宣言する必要があります:すべての

function press(event) { 
    if (event.keyCode == 13) { 
    // do something 
    } 
} 
+0

これはIEでは動作しません。あなたは 'var e = event ||あなたのケースではwindow.event' :) –

1

まず、あなたはFF /クローム/オペラでの使用のためにeventを定義する必要があります/ ..で関数呼び出し内の関数定義です。 (onkeydown

HTML:

<form method="POST" action="/"> 
<input id="myinput" type="text" onkeydown="return press(event)" value="X"/> 
</form> 

はJavaScript:

function press(e) { 
    // IE uses "window.event", others pass the event as argument 
    var evt = e || window.event; 
    if (evt.keyCode == 13) { 
     // do something 
     alert("enter!"); 

     return false; 
    } 
} 

注意関数定義 HTMLマークアップでの関数呼び出しの両方でreturnの使用。 は、フォームがを送信するのを防ぎます。これは、フォーム内の入力にと入力すると、デフォルトの動作であるになります。

関連する問題