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を使った場合のデモページ