ywork2020.com

Title

要素にキーアップイベントを登録する

目次 (INDEX)

keyupとは

ここで説明する keyup とは次の語句からなるjQueryのメソッドです。
key
読み: キー
意味: 鍵、ここでは、キーボードのキーのこと
up
読み: アップ
意味: 上、上昇、上げる、上る

目次に戻る

keyupメソッドの概要

このメソッドは、セレクタに該当する既存要素にキーアップイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているキーアップイベントを呼び出します。

キーアップイベントは、要素にフォーカスがあるときにキーボードのキーが押された後にキーが上がる(キーを離す)と同時に発生します。

目次に戻る

構文

Selector.keyup(Handler(EventObject));
Selector.keyup([EventData], Handler(EventObject));
Selector.keyup();
  • 01: キーアップイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているキーアップイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、input 要素 password 型を題材にします。

この要素にフォーカスがあるときにキーボードからキーを入力して、離す瞬間に少しだけ入力内容を表示することで、誤入力を防ぐための補助を行います。

構文の全ての記法の理解には、 click() のページを参照してください。

サンプルコード: CSS
<style>
	span{
		display: none;
		margin-left: 1em;
		padding: 0.2em;
	}
</style>
  • 03: display: none; (初期設定ではこの要素は非表示となります。)
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<input type="password" placeholder="入力して下さい">
	< span>< /span>
	<script>...</script>
</body>
  • 06: input type="password" (パスワードを入力するための要素です。この要素に keyup() を使ってハンドラーをバインドします。)
  • 07: span (入力したキーを離した一瞬にだけ入力された内容を表示するのに使用します。初期設定ではCSSで見えないようにしています。)
サンプルコード: script
<script>
	$("input").keyup(function(){
		$("span")
			.text($(this).val())
			.fadeIn(0)
			.fadeOut(300)
		;
	});
</script>
  • 02-08: .keyup(Handler(EventObject)) (keyup()を使ってHandlerをバインドします。ハンドラーには関数を指定しています。なお、ここでは EventObject は利用しません。)
  • 03-07: $("span").text($(this).val()).fadeIn(0).fadeOut(300) (ここでの this は ハンドラーの呼び出し元である input のことです。input の値を span のテキストに設定し、一瞬だけ要素を表示しています。)
実行結果:

目次に戻る