例えば「a」のボタンが押されたときに、何かイベントを発動させたいときjQueryで発動させることができます。
まずは、キーを押された時に取得できる値を確認します。
以下のフォームをクリックして、文字を打ち込んでください。
押されたキー：[ボタン名]
キーのcharCode：[数値]
JSの記述は
<script>
$(document).ready(function(){
$("#myinput").keypress(function (e) {
$("#myinput").val('');
$("#key_val").text(e.key);
$("#key_num").text(e.which);
});
});
</script>これに対してHTMLは
<input id="myinput" type="text" >
<div>
押されたキー：<span id="key_val">ボタン名</span>
<br>
キーのcharCode：<span id="key_num">数値</span>
</div>ボタンの値だけでも制御できますが、どんなキーにも数値で返ってくるcharCodeを使うのが、無難な気がします。
次は、応用で押されたキーによって、スタイルを変えてみます。
下記のフォームをクリックして、「a」「b」「c」「d」「e」のどれかを押してください。
a
b
c
d
e
JSはこちら
$(document).ready(function(){
$("#myinput2").keypress(function (e) {
$("#myinput2").val('');
$("#demo_num span").removeClass("act");
$(".demo_" + e.which).addClass("act");
});
});HTMLはこうなります。
<div id="demo_num">
<span class="demo_97">a</span>
<span class="demo_98">b</span>
<span class="demo_99">c</span>
<span class="demo_100">d</span>
<span class="demo_101">e</span>
</div>
<input id="myinput2" type="text" />ちなみに、フォームを使わずにキーのイベントを実行したい場合の記述はこちら。
$("#myinput2").keypress(function (e) {
↓
$(window).keypress(function (e) {なお、これを使う場合は、ブラウザのショートカットキーとのバッティングに注意しましょう。
また、keydownメソッドも同等の動きをしますが、発火する順序が違います。
keydown、keypress、keyupの順にします。
