JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーする方法をご紹介します。
Contents
ディスプレイ広告
JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーするCSS記述
※テキスト入力エリア「input[name=”namearea”]」のCSS記述です。必要に応じて変更して下さい。
<style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0; } input[name="namearea"]{ width: 360px; height: 30px; margin: 0 auto; } </style>
JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーするHTML記述
※テキスト入力エリア「input[name=”namearea”]」とボタンエリア「class=”btn”」を用意します。
<h1>jJavaScriptでval(値)を変更した後にon('change')イベントをトリガーします。<br>以下のテキストボックスにテキストを入力後、「ボタン」をクリックして下さい。</h1> <input type="text" name="namearea" value="" placeholder="ここにテキストを入力"> <br> <br> <br> <button type="button" class="btn">ボタン</button>
JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーするJavaScriptの記述
※jquery-3.1.1.min.jsファイルを読み込みます。$(‘テキスト入力エリア’).on(‘change’)でテキスト入力後にalert()メッセージを表示します。
$(‘ボタン’).on(‘click’)でボタンクリック後にテキスト入力エリア(value)に変更後のテキストを設定し、trigger(‘change’)で$(‘テキスト入力エリア’).on(‘change’)イベント発生させます。
<script src="jquery-3.1.1.min.js"></script> <script> $('input[name="namearea"]').on('change',function(){ alert("テキストが変更されました"); }); $('.btn').on('click',function(){ var value = "trigger('change')を使ってボタンクリックでテキストを変更"; $('input[name="namearea"]').val(value).trigger('change'); }); </script>
JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーするデモページ
JavaScriptでval(値)を変更した後にon(‘change’)イベントをトリガーするデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。