デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.keypress( )キー入力があった時の処理を設定

構文

キー入力があった時の処理を設定返値:jQueryオブジェクト
jQo.keypress( function )ver1.0〜
jQo.keypress( )ver1.0〜
jQo.keypress( object, function )ver1.4.3〜

機能

jQueryオブジェクトで指定した要素にフォーカスがあるとき、キー入力されたら引数のfunctionを実行します。引数にfunctionを設定しない場合は、要素に設定(バインド)されたfunctionを実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

keydownメソッドkeyupメソッドと異なり「controlキー」「shiftキー」など文字入力に関係ないキーではfunctionを実行しません。そしてkeypressメソッドはブラウザによっては異なる動作をするかもしれず(特に日本語入力モードでは)、利用には注意しましょう

解説

キー入力があった時に実行する処理を設定

サンプル(keypress/01.html)を開いてbody内にtype属性がtextのinput要素とp要素があることを確認してください。

<input type="text" value="focus me" />
<p></p>

jQueryは以下の様に記述され、keypressメソッドの引数にfunctionの「pressFunc」が設定されています。

$(function () {
	$("input").keypress(pressFunc);
});

keypressメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてキー入力があったら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

keypressに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 キー入力で実行したい処理
}

サンプルkeypress/01.htmlで利用したpressFuncは以下の様になっており、引数eo(イベントオブジェクト)に含まれるwhichプロパティを利用して、押したキーのキーコードを取得します。キーコードはappendメソッドを利用してp要素に追加していきます。

function pressFunc(eo) {
	$("p").append(eo.which + " ");
};

結果として、input要素にフォーカスを当ててから何かキー入力するとキーコードがp要素に追加されていきます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(keypress/01b.html

$("input").keypress(function (eo) {
	$("p").append(eo.which + " ");
});

他の要素に設定されたキー入力時の処理を実行する

keypressメソッドは引数を設定しないと、要素に設定されたキー入力時の処理を実行します。
サンプル(keypress/02.html)を開いてbody内にbutton要素が追加されたことを確認してください。

続いてjQueryを確認してください。キー入力時の処理はkeypress/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbutton要素をクリックするとinput要素に設定されたキープレシ時の処理が実行されます。

$("button").click(function(){
	$("input").keypress();
})

結果として、button要素をクリックしてもinput要素でキー入力したのと同じように処理されます。ただしキーではないためキーコードが取れず表示されるのは「undefined」となります。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(keypress/03.html)を開いてbody内の構成はkeypress/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、keypressメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。

$("input").keypress({test:10},function(eo){
	$("p").append(eo.data.test + " ");
})

結果として、input要素にフォーカスを当ててから何かキー入力すると、第1引数で渡されたtestプロパティの値「10」がp要素に追加されます。

関連項目

キーを離した時の処理を設定したい場合はkeyupメソッドを利用します。
「controlキー」「shiftキー」など文字入力に関係ないキーでも処理を実行したい場合はkeydownイベントを利用しましょう。

メモ

キーを押しっぱなしにしたときの動作

本家のサイトではキーを押しっぱなしにしたときの動作がkeydownメソッドと異なるとあり、サンプルを作成したのですが違いが分かりません。

→keypressのサンプル(keypress/test01.html
→keydownのサンプル(keypress/test01b.html

両方ともイベントが発生したらカウンターを増やす処理を書いています。本家のサイトでは、keydownイベントはキーを押しっぱなしにしても1回しかイベントが発生しないようなことが書いてあるのですが、実際はキーを押している間カウンターは増え続けます(macのsafariとchromeで確認)。

$("input").keypress(function (eo) {
	cnt++;
	$("p#times").text(cnt);
	$("p#which").text(eo.which);
});

本家サイトでの説明引用
This is similar to the keydown event, except in the case of key repeats. If the user presses and holds a key, a keydown event is triggered once, but separate keypress events are triggered for each inserted character.