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

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

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

 本記事の内容

・keyupとは?
・keyup(DEMO)


keyupとは?

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

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

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

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

keycode 一覧

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

01234
4849505152
56789
5354555657
ABCDE
6566676869
FGHIJ
7071727374
KLMNO
7576777879
PQRST
8081828384
UVWXY
8586878889
Z
90
F1F2F3F4F5
112113114115116
F6F7F8F9F10
117118119120121
F11F12
122123
01234
96979899100
56789
101102103104105
*+./
106107109110111
BackSpaceTabEnterShiftCtrl
89131617
AltPauseBreakCapsLockEscSpace
1819202732
PageUpPageDownEndHome
3334353637
InsertDelete
3839404546
NumLockScrollLock*:+;<,
144145186187188
=->.?/@{[
189190191192219
|\}]~^_\
220221222226

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

コメント

テキストのコピーはできません。