JavaScriptによる入力の値を変更した後、Internet Explorer 11の変更イベントが発生しない

ChromeではなくIEの問題に直面しています。私はjavascriptで値を変更した後、変更イベントをトリガしません。私はそれがevent changeの仕様として正しく働くと思います。ユーザーがjavascriptで入力を変更した場合、ユーザーにが入力されていないことを意味する入力にフォーカスが失われ、（javascriptは）入力を変更します。しかし、Chromeはユーザーが入力を変更したことを知っているので、変更をトリガーするスマートな人です:)。 IEをChromeのように動作させる方法はありますか？JavaScriptによる入力の値を変更した後、Internet Explorer 11の変更イベントが発生しない

document.getElementById('inputName').addEventListener("keyup", function(e){ 
 
\t this.value += '_'; 
 
});

<body> 
 
    <input id="inputName" value="name" onchange="document.getElementById('outputName').innerHTML = document.getElementById('inputName').value"/> 
 
    <div id="outputName">name</div> 
 
</body>

出典

2017-10-31 logger

私は、任意のブラウザとは思いませんJSを介して入力が変更されたときに変更イベントをトリガーしますか？私はあなたのデモをChromeで実行しました.JSを介して唯一の変更が行われた場合、 'onchange'がトリガされません（例：フィールドをクリックして矢印またはシフトキーを押すと、これは間接的にキーアップJSコード）。リンクされたMDNページでさえ、ユーザーが物事を変更したときにのみ変更イベントがトリガーされると言います。 – nnnnnn

Javascriptで値を変更した場合、_keyup_イベントではありません。それは想定されているとおりに動作しています。とにかくイベントをトリガーしたい場合は、[dispatchEvent（）]（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent）を使用する必要があります。 – icecub

@nnnnnnはいわかっています。私はIEをそのように振る舞わせたいが、それはしない。私のコードをIEで試してみてください - >文字を入力してから、私がしたいことを理解してください。 – logger

それが実際に変更イベントが、これはアクションをJSで上書きされることを奇妙なようだ...私は仕様が、この時点では比較的はっきりしないと思うので、私は我々が呼び出すことができるかどうかわからないんだけどそれはバグです。

とにかく、入力イベントをリッスンすることで、この動作を模倣することができます。入力イベントは、ユーザーが入力値の変更をコミットするたびにトリガーされます。そこから
、あなたはちょうどあなたがblurイベントに読み込みます旗を調達する必要があります。

inp.oninput = function(e) { // every time the user commits a change 
 
    this._hasChanged = true; // raise a flag 
 
}; 
 
inp.onblur = function(e) { // when we loose focus 
 
    if (this._hasChanged && // only if there were some changes made by the user 
 
     typeof this._onchange === 'function') { 
 
    this._onchange();  // trigger our fake change event 
 
    } 
 
    this._hasChanged = false; // set the flag back to false 
 
}; 
 

 
inp._onchange = function(e) { // our fake onchange listener 
 
    log.textContent = this.value; 
 
}; 
 
inp.onkeyup = function(e) { 
 
    this.value += '_'; 
 
}

<input id="inp" value="name"> 
 
<pre id="log"></pre>

ソリューション： https://jsfiddle.net/hrr3n0eh/

出典

2017-10-31 04:59:42 Kaiido

ありがとう、しかし、あなたが素片を知っている場合、彼らは要素に直接onchangeを置く。あなたが入力した文字を削除すると、変更されたものとみなされます。>これは 'change'イベント – logger

@loggerの正しい動作ではありません。これは、eventListeners 、そして偽のonchangeを発射する代わりに、あなたは本当のものを引き起こすことができます。 2番目の点については、現在のコードでは、値を変更するので、すべてのブラウザでchangeイベントが発生します。しかし、実際にこのケースを処理する必要がある場合は、値が実際に変更されたかどうかを確認するために追加のチェックを追加することができます。 [this fiddle]（https://jsfiddle.net/hrr3n0eh/）はこれらの問題を解決しますか？ – Kaiido

ありがとうございました。私はあなたの考えを持っており、私は適用しようとします。実際、この例よりも複雑ですが、解決策に追いつくのは良いことです。 – logger

JavaScriptによる入力の値を変更した後、Internet Explorer 11の変更イベントが発生しない

答えて

関連する問題