テキストボックスの入力文字が変化したタイミングでJavaScriptを実行するコードを紹介します。
概要
テキストボックスに文字列を入力したり、文字列を編集した際にJavaScriptを実行したい場合があります。
書式
テキストボックスのINPUTタグ内に onchange 属性を指定し、値に実行するJavaScriptのコードを記述します。
<input type="text" onchange="(実行するJavaScriptのコード)"/>
プログラム例
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function TextBoxOnChange(sender, event) {
var elem = document.getElementById("output");
elem.innerHTML = sender.value;
}
</script>
</head>
<body>
<h2>テキストボックスの入力が変化した際にJavaScriptを実行する</h2>
<input id="inputTextBOx" type="text" onchange="TextBoxOnChange(this,event);"/>
<hr />
<div>出力</div>
<div id="output"></div>
</body>
</html>
解説
以下のコードがテキストボックスのINPUTタグです。
INPUTタグ内のonclick属性に実行したいJavaScriptを記述します。
今回の例では、呼び出す関数名(TextBoxOnChange)を記述しています。ボタンがクリックされるとTextBoxOnChange()関数が呼び出されます。
<input id="inputTextBOx" type="text" onchange="TextBoxOnChange(this,event);"/>
テキストボックスの値が変化したときに呼び出されて実行されるJavaScriptの関数の実装になります。
この関数(TextBoxOnChange)では、"output"のIDを持つタグの要素を取得し、そのタグの内部に変化したテキストボックスの値の文字列を挿入して画面に表示します。
function TextBoxOnChange(sender, event) {
var elem = document.getElementById("output");
elem.innerHTML = sender.value;
}
実行結果
上記のHTMLファイルをWebブラウザで表示すると、下図の画面が表示されます。
テキストボックスに文字列を入力します。入力しただけではJavaScriptは実行されません。
テキスト入力後に[Enter]キーを押すと、入力内容が確定され、JavaScriptが実行されます。
テキストボックス下部の[出力]のエリアに、テキストボックスに入力した文字列が表示されます。
または、テキストボックスからフォーカスが失われた場合も入力内容が確定され、JavaScirptが実行されます。文字列をテキストボックスに入力します。
入力後、テキストボックス以外の場所をクリックし、テキストボックスからフォーカスが失われると、
テキストボックスの入力内容が確定され、JavaScriptが実行され、[出力]エリアにテキストボックスに入力した文字列が表示されます。
テキストボックスの入力内容が変化したタイミングでJavaScriptを実行する処理を実装できました。
このページのキーワード
- テキストボックスの入力文字が変化したタイミングでJSを実行する
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-12-20
作成日: 2022-12-20
