※スマホ対応はしてません。

タグ: form

inputイベントでフォーム入力値をリアルタイム取得できるよ。(あとjQuery例。)

カテゴリー: JavaScript

input イベントを使います。

時間差なしで入力値が取れる。わあかんたん。

jQueryを使った例。

change イベントは入力を終えてフォーカスを外した際に発火するのに対して、 input イベントは入力の度に発火します。

対象要素

  • <input>
  • <textarea>
  • <select> … IE、Edgeでだめ
  • contenteditable 属性付きの要素 … IEでだめ

<select> は change イベントを使います。この場合は変更したらフォーカス残したままでも、すぐ発火する。(よね? しない環境ある?)

contenteditable は、逆に change イベントが発火しない。

チェックボックスとかはだめ

MDNによると、歴史的経緯により <input type="checkbox"> とかは click イベントを使う必要があるそうです。

あ、Firefoxだけ動くみたい。今後動くの増えるかなあ。

動作はIE 9+

基本機能は一般的なブラウザ各種と、IEは9+で利用可能です。

ただし一部機能が使えなかったりするみたいです。まあ普通に <input type="text"> で使う分には、特に。

昔話

昔はこの input イベントがなかったので、 setTimeout() を使って自前で監視してました。それ用のJavaScriptライブラリも多数あったと思う。

今はもう、そんな苦労する必要はないのだ……。

参考

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。

カテゴリー: JavaScript

必要ならどうぞ。

デモ

jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS

共通:要素の探し方

input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。

<form id="my-form">
  <input type="text" name="my-text" value="This is text." />
</form>
// id="my-form" の中から name="my-text" なものを検索
var $input = $('#my-form [name=my-text]');

[name=xxx]だけだとフォームが複数あるときに全部取ってきちゃうので、フォームの方にはidを振って、その中から探すようにしました。

テキスト

これが基本パターン。 .val()で得られます。

(さらに…)