• HOME > 
  • JavaScript > 
  • JSでテキストボックスに入力された値を即時取得する【this...

JSでテキストボックスに入力された値を即時取得する【this.value】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ユーザーの入力値を即時取得するには?

ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。

ポイントは、フォームの送信を行わず、入力と同時に取得するという点です。

テキストボックスの即時取得の例

onkeyup属性を使う

まず、ユーザーがテキストボックスに入力したら処理を発火させたいので、inputに対してonkeyup属性を設定してJavaScriptの関数が呼び出されるようにします。

HTML

<input type="text" id="test" onkeyup="currentData()">

後はJavaScriptで関数を用意し、inputの入力値を取得・任意の処理を作成すれば完成です。

JavaScript

var target = document.getElementById('test');
function currentData(){
    var val = target.value;
    console.log(val);//テキストボックスに入力された値
}

onkeyupとonchangeの違い

onkeyup属性を使ってキーでの入力を即時反映するようにしていますが、onchange属性でも可能です。

通信を伴うような重めの処理を行う場合は、一文字ごとに処理が実行されない方が望ましいと思いますのでonchangeにした方がベターかもしれません。

onchange属性を使う場合は、テキストボックスに入力後、別の要素にフォーカスが移ったタイミングで処理が実行されます。

onkeyupについて詳しくはこちらの記事をご覧ください。

引数にthis.valueを使う

先ほどの例ではJavaScript側で要素のIDをセレクターにして値を取得しましたが、onkeyup属性に設定した関数の引数に「this.value」を指定するとより簡潔にまとめることができます。

HTML

<input type="text" onkeyup="currentData(this.value)">

JavaScript側では引数を受け取るだけです。

JavaScript

function currentData(val){
    console.log(val);//テキストボックスに入力された値
}

まとめ

以上が、ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得する方法です。

広告
広告

関連する記事

サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。
サムネイル

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

2024年07月02日
フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残します。
サムネイル

JSで配列の重複チェックを行う【Setオブジェクトを利用】

2024年07月02日
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
サムネイル

JSのkeyup・keydown・keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索(郵便番号を打ち込むと住所が自動入力される)機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。