定番
履歴

jQuery キーを押されたら実行

jQuery キーを押されたら実行
キーボードのボタンを押されたときに何かを実行するときのサンプルです。

例えば「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) {

なお、これを使う場合は、ブラウザのショートカットキーとのバッティングに注意しましょう。

2018-10-08 21:44:58
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top