jQueryで入力中のテキストをリアルタイムで取得する

入力中の文字をリアルタイムで取得したいということがあったので、実装可能かどうか試してみました。

サンプルコード

まずはHTMLです。
入力するinputと、入力文字をリアルタイムで取得して出力する要素を用意します。

<div id="output"></div>
<input type="text" id="sample">

keyupイベントでの取得を試してみます。

$(function() {
	$(document).on('keyup', '#sample', function(e) {
		$('#output').text($('#sample').val());
	});
});

keyupイベントは名前の通りキーボード入力後(離した時)に実行されるイベントで、今回試した限りではiOSの変換時がうまく取得できなかったのですが、それ以外はほぼ取得できていそうでした。
keyupを使った場合のデモページ

次にkeyupイベントではなくinputイベントを使ってみます。

$(function() {
	$(document).on('input', '#sample', function(e) {
		$('#output').text($('#sample').val());
	});
});

inputイベントは要素の値が変更された時に実行されるイベントで、この場合だとiOSの変換時でも取得することができました。
inputを使った場合のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. 小水流英昭 より:

    サンプルコード有難うございました。これを探しておりました。助かります。

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年9月
 1234
567891011
12131415161718
19202122232425
2627282930