[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる

今回は、jqueryを使って、テキストボックスに入力された文字の取得方法についてご紹介したいと思います。テキスト入力に入力された文字を取得することで、入力された文字がどんなものなのか、入力形式として正しいのかどうかという前段階として必要な技術ですね。まずは、取得したデータをどう使うかはおいておいて、テキストボックスのデータが変更された時に、今なにが入力されているのかを取り出せるサンプルの作成を目指して見ましょう。

HTMLで、テキストボックスを用意しよう

まずは、テキストボックス変更時のテキストデータを取得するために、htmlでテキストボックスを用意して見ましょう。

<p>サンプル用テキストボックス１</p>
<input type="text" name="sample_text_1" id="sample_text_1">

上記のように、テキストボックスのデータをとって見ましょう。

jqueryでテキストボックス変更時にテキストデータを取得してみよう

テキストボックスの変更時にテキストデータを取得してみようと思います。取得タイミングは、jqueryのトリガー発生タイミングによって変わります。

今回は、keypress、keyup、changeの３パターンのタイミングをご紹介しつつテキストデータの内容を取得してみようと思います。

まずは、keyupした時のタイミングをご紹介したいと思います。
サンプルコードと実装例は次の通りです。

<p>サンプル用テキストボックス１</p>
<input type="text" name="sample_text" id="sample_text">
<div id="sample_text_output"></div>
<script>
 $(function(){
   $('#sample_text').on('keyup',function(){
      var text=$(this).val();
      $('#sample_text_output').text(text);
   });
 });
</script>

keyupを使ったテキストデータの取得方法

サンプル用テキストボックス１

テキストボックスにテキストされている文字データ(keyup編）

---

上記のように、キーボードを話した時に入力されているデータを取得しているので、入力しながら同じデータが取得されていることがサンプルからわかると思います。

次にkeypressを使ったデータの取得方法をご紹介したいと思います

keypressを使ったサンプルコードと実装例は次の通りです。

<p>サンプル用テキストボックス2</p>
<input type="text" name="sample_text" id="sample_text">
<div id="sample_text_output"></div>
<script>
 $(function(){
   $('#sample_text').on('keypress',function(){
      var text=$(this).val();
      $('#sample_text_output').text(text);
   });
 });
</script>

keypressを使ったテキストデータの取得方法

サンプル用テキストボックス2

テキストボックスにテキストされている文字データ(keypress編）

---

上記のように、全角入力時とデリートやバックスペースキーなどで削除を行った時には、動作しないことがわかります。

最後にchangeを使った方法をご紹介したいと思います。

<p>サンプル用テキストボックス3</p>
<input type="text" name="sample_text" id="sample_text">
<div id="sample_text_output"></div>
<script>
 $(function(){
   $('#sample_text').on('change',function(){
      var text=$(this).val();
      $('#sample_text_output').text(text);
   });
 });
</script>

changeを使ったテキストデータの取得方法

サンプル用テキストボックス3

テキストボックスにテキストされている文字データ(change編）

---

上記のようにテキストボックスを入力してエンターキーを押すことでデータが反映されているのがわかるかと思います。つまりテキストボックスからフォーカスが外れた時に発動していると言えるでしょう。

まとめ

今回は、jqueryを使ってテキストボックスのテキストデータを取得する方法をご紹介させていただきました。keyup、keypress、changeなどを使うことで取得タイミングや取得できるデータが異なることがわかりましたね。あなたの作るものに合わせたタイミングでデータを取得して有効活用して見てください。