• 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で入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。