【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の一覧表を作ってみたので、これを利用してうまくキーイベントについて理解を深めましょう!

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

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
Javascript
シェアする

コメント