jQueryイベントのキーボードイベント(ctrl Enterキーでフォーム送信等)

jQueryイベントのキーボードイベント(ctrl Enterキーでフォーム送信等)_jquery

WBOY

リリース： 2016-05-16 16:48:46

オリジナル

1348 人が閲覧しました

キーボードイベントは、テキスト入力領域の内側か外側かに関係なく、すべてのユーザーのキーストロークを処理します。キーボードイベントの範囲はブラウザによって異なります。通常、この種のキーボードイベントは、フォーム要素、タグ要素、ウィンドウ、ドキュメントなどの要素に作用します。キーボードイベントは、交点を取得できるすべての要素でトリガーできます。このようにして、Tab キーを使用してジャンプできる要素は、キーボードイベントを使用できる要素であると理解できます (tabindex が設定されていない場合)。属性値の場合、tabindex が負の数値に設定されている場合、Tab キーを使用してもフォーカスは取得されません。

キーボードイベントはパラメーターイベントを渡すことができます。実際、このイベントはいくつかのプロパティを含むオブジェクトです。イベントがトリガーされると、そのイベントを使用して取得できます。たとえば、キーボードを使用する場合、event.keyCode を使用して、押されたキーの ASCII コード値を取得できます。以下を参照

1: keydown() イベントは、キーボードがクリックされたときにトリガーされる最初のキーボードイベントです。ユーザーがキーを押し続けると、keydown イベントが継続します。

コードをコピーコードは次のとおりです。

 $('input').keydown( function(event ){
 alert(event.keyCode); 
 });

 これらの要素は、上、下、左、右キーなど、キーボードから返される値 (それぞれ 38、40、37、39) によってさらに制御できます。 

2: keypress() イベントは keydown と似ていますが、キーのデフォルトの動作を防ぐ必要がある場合は keypress イベントを使用する必要があります。

3: keyup() イベントは、(keydown イベントの後に) 発生する最後のイベントです。keydown イベントとは異なり、このイベントはキーボードが離されたときに 1 回だけトリガーされます (キーボードを離すことは継続的な状態ではないため)。。

コードをコピーコードは次のとおりです。 $('input').keyup( funciton() {

alert('keyup 関数が実行中です!!');

 });

4: jQuery では、keydown、keypress、keyup イベントは特定の順序で実行されます。

コードをコピーコードは次のとおりです。 $('input').keyup( function() {

console.log('keyup');

 });

 実行結果は、keydown、keypress、keyup です。 
 ここでアラートを使用しない理由は、アラート中に一部のイベントが発生しないようにするためです。このコードを試してみたい場合は、Firefox で実行できます。ブラウザに Firebug プラグインをインストールする必要があります。 Firefox はオープンソース ブラウザであるため、安心してインストールしてください。オープンソース ソフトウェアを信頼します。 

jQuery には、イベントが発生する順序に従って、キーボード イベントを処理する 3 つの関数があります。

コードをコピー

コードは次のとおりです。

keydown();

keyup( );

keypress();

キーダウン()

キーボードが押されたときに keydown イベントがトリガーされます。ブラウザのデフォルトイベントがトリガーされないようにするために、バインドされた関数で false を返すことができます。

キーアップ()

キーアップイベントは、キーが放されたときにトリガーされます。つまり、キーボードを押して立ち上がった後のイベントです

キープレス()

keypress イベントは、キーがタップされたときにトリガーされ、同じキーを押したり離したりすると理解できます。

A、Z、または Enter ボタンを押したかどうかを確認するにはどうすればよいですか?

キーボードイベントはパラメーターイベントを渡すことができます。実際、一部の jQuery イベント関数はそのようなパラメーターを渡すことができます。

コードをコピーコードは次のとおりです。

$('input').keydown( function(event ){
alert(event.keyCode);
});

上記のコードでは、event.keyCode はどのキーが押されたかを取得するのに役立ちます。上、下、左、右のキー (それぞれ 38、40、37、39) などの ascII コードを返します。 >

Ctrl Enter を実装したい場合は、フォームを送信するには Ctrl Enter を使用します

コードをコピーコードは次のとおりです。

$(document).keypress(function( e) { 
if (e.ctrlKey && e.that == 13)
$("form").submit();
})

その他の参考情報:

予備知識

1. 数値 0 のキー値 48.. 数値 9 のキー値 57

2. キー値 97.. z キー値 122; A キー値 65.. Z キー値 90
3. 43;-キー値 45;.キー値 46;Backspace 8;Tab キー値 9;
4.event は IE ではグローバルであり、Firefox では一時オブジェクトであり、パラメーターを渡す必要があります

コードをコピーコードは次のとおりです。

*/
jQuery.extend( {
/*========================================== ==== ============================
関数説明: キーの値を取得
呼び出し方法:
jQuery.getKeyNum (event);
*/
getKeyNum:function(e){
var keynum;
if(window.event){ // IE
keynum = イベント.keyCode;
}
else if(e.that){ // Netscape/Firefox/Opera
keynum = e.that;
return keynum; 🎜>/*== =========================================== ====== =======================
関数の説明: 整数かどうかを判断し、編集ボックスを数値のみの入力に制限します
呼び出しメソッド:

解決すべき問題:
タブキーが機能しないFirefox.
*/
isInt. :function(e){
var keynum = this.getKeyNum(e);
if(keynum >= 48 && keynum return true;
}
return false;
/*=========== =========== ====================================== =========== ===
関数の説明: 編集ボックスを数字と 1 つの小数点のみに制限します。
呼び出しメソッド:
< input type="text" onkeypress="return jQuery. .isFloat(this,event); />
*/
isFloat:function(txt,e){
var keynum = this.getKeyNum (e);
if(keynum == 46){//小数点を入力します
if(txt.value.length == 0){
return false; value.indexOf('.') >= 0) {
return false;
}else{
return true;
}
if(this.isInt(e) )){
true を返す;
}
false を返す
}
});