2

input のテキスト要素の値の変更時にイベントを発生させたいのですが、
javascriptで値を変更すると、changeではイベントが発生してくれません。
どうしたら発生するでしょうか?

調べてみますと,onpropetychangeを使うといいらしいのですがうまくいきません

var obj1 = document.getElementByID("XXXXX");
obj1.addEventListener(function(){"propertychange",alert("イベント発生");},false);

私が考えたのがこれですが、動きません。

環境はIE11,JavaScriptのみ(Jquery禁止)です。

ご回答よろしくお願いいたします。

3

3 件の回答 3

1

コメントにもあるように誤字が散見されますが、下記で動くかと思います。

var obj1 = document.getElementById("test");
obj1.addEventListener('change', function(){alert("イベント発生");}, false);
<input type="text" id="test" />

2
  • 1
    ご回答がありがとうございます。たしかに、input textを手入力したときはこれでうごくのですが、別の関数で<input type="text" id="test" />のvalueを変化させたときは、イベントが発生しないのです。><。
    – user18946
    Commented 2016年11月11日 2:07
  • コメントばかりに目が行って、本文のJSで修正した場合の旨見落としてました。スルーしてください。
    – user10259
    Commented 2016年11月11日 4:05
1

スクリプトからイベント発火させるには、
コメントでIEの場合fireEvent を使うと書いたのですが、
(IE9が分水嶺らしい)
IE11ではdispatchEventを使うようです。
createEvent, initEvent
以下例:
(私自身はIE11を使用していないのでIE11でテストしていません。動作しなかったらすみません。)

var obj1 = document.getElementById("XXXXX");
obj1.addEventListener('change', function(){alert("チェンジイベント発生");}, false);

function changeAndFire(){
	var evt = document.createEvent("Event");
	evt.initEvent("change", false, false);
	obj1.value += "Test";
	obj1.dispatchEvent(evt);
}
<input type="text" id="XXXXX" />
<button type="button" onclick="changeAndFire()">スクリプトから値の変更とイベント発生</button>

0

だいぶ時間が立っているので、解決されたとおもいますが、私も同じ問題に遭遇しました。
投稿主は、多分、外部のスクリプトで値が設定されたことを検出したかったのだと思います。
自分のスクリプトで値を設定するなら、上記のように、設定側で処理すれば対応可能です。

外部のスクリプトで、inputに値が設定されたのをイベントで検出することはできませんでした。
そこで、タイマーイベントを使用して、inputの値を定期的にチェックして、変化を検出する方法で、対応しました。
具体的には、郵便番号から住所に変換する処理を利用した際に、郵便番号フィールのの入力を検出して、郵便番号から住所に変換する関数を呼び出す際に、タイマーを設定して、入力フィールドの変化を検出する関数を呼び出すようにしました。
都道府県名の入力フィールドに値が設定されたら、そこで必要な処理を行い、設定されない場合は、再度タイマーを設定しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。