JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーする方法｜DAD UNION

JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーする方法をご紹介します。

Contents

JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーするCSS記述
JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーするHTML記述
JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーするJavaScriptの記述
JavaScriptでval（値）を変更した後にon(‘change’)イベントをトリガーするデモページ

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>