【jQuery】便利なテキストボックス連動方法（keyup）

Toshi

jQueryでテキストボックスの１つに文字を打ち込むと、もう１つのテキストボックスに文字が打ち込まれるというコード作りました。どこいった場面で利用できるかパットは思いつきませんが、「keyup」イベントについて理解が深められるかと思います。

今回解説していく内容は以下です！

本記事の内容

・keyupとは？
・keyup（DEMO）

keyupとは？
1. keycode 一覧
keyup（DEMO）
まとめ

keyupとは？

keyupとは、JavaScript（jQurey）のキーイベントで「ユーザーがキーボードのキーを離したとき」に実行されるイベントです。

イベント	タイミング
keydown	ユーザーがキーを押したとき
keypress	ユーザーがキーを押して離したとき
keyup	ユーザーがキーを離したとき

このイベントを利用してユーザーがキーボードに入力した値を知りたい場合は KEYCODE を知っておく必要があります。

KEYCODEとは、キーボードの一つ一つに振られている値です。例えば 0 だと 48 というKEYCODEが振られており、48という数値を使ってユーザーが「０」を押したかを判断することができます。

keycode 一覧

KEYCODEの一覧表を作ってみたので、これを利用してうまくキーイベントについて理解を深めましょう！

0	1	2	3	4
48	49	50	51	52
5	6	7	8	9
53	54	55	56	57
A	B	C	D	E
65	66	67	68	69
F	G	H	I	J
70	71	72	73	74
K	L	M	N	O
75	76	77	78	79
P	Q	R	S	T
80	81	82	83	84
U	V	W	X	Y
85	86	87	88	89
Z
90

F1	F2	F3	F4	F5
112	113	114	115	116
F6	F7	F8	F9	F10
117	118	119	120	121
F11	F12
122	123

0	1	2	3	4
96	97	98	99	100
5	6	7	8	9
101	102	103	104	105
*	+	–	.	/
106	107	109	110	111

BackSpace	Tab	Enter	Shift	Ctrl
8	9	13	16	17
Alt	PauseBreak	CapsLock	Esc	Space
18	19	20	27	32
PageUp	PageDown	End	Home	←
33	34	35	36	37
↑	→	↓	Insert	Delete
38	39	40	45	46
NumLock	ScrollLock	*:	+;	<,
144	145	186	187	188
=-	>.	?/	`@`	{[
189	190	191	192	219
\|\	}]	~^	_\
220	221	222	226

keyup（DEMO）

今回、「テキストボックス連動」をさせるということで、出来上がったものがこちらになります。

DEMO

Sample CODE


jQuery
var $test1 = $('.test1');
var $test2 = $('.test2');
$test1.on('keyup change',function(ready){
$test2.val($test1.val())
});
$test2.on('keyup change',function(ready){
$test1.val($test2.val())
});

1. 簡単にこの Sample CODE について説明すると、インプットボックスにあらかじめ「test1」と「test2」というclassをつけておきます。

<input class="test1" type="text" value="" />
<input class="test2" type="text" value="" />

2. (‘keyup change’,function(ready){ でインプットボックスの中身を読み込んだタイミングで【val() / インプットボックス】の中身を1と2紐づけるために以下のような書き方になっています。

$test1.on('keyup change',function(ready){
$test2.val($test1.val())
});
$test2.on('keyup change',function(ready){
$test1.val($test2.val())
});

簡単に説明させていただきましたが、解説は以上です！

まとめ

Toshi

いかがでしたか？DEMOを使ってCODEを見ればなんとなくどんなことをしているかわかるかと思います！プログラミングの勉強の際、いろんな人のCODEを真似てみたり実際に使うことにより応用できるようになると思うのでぜひこの Sample CODE を使って何か試しに作ってみてください！