ユーザーが入力している間 (つまり、ボックスがフォーカスを失う前) にテキストボックスへの変更を検出するために、onpropertychange イベントを使用しています。これは機能していますが、コードを使用してテキストボックスの値を設定するとバグが発生するようです。これを行うと、onpropertychange イベントが発生しますが、ユーザーが次にテキスト ボックスに変更を加えても、イベントは発生しません。ただし、次の変更後の変更によってイベントが発生し、コードを使用してテキスト ボックスの値が再度設定されるまで、イベントは正常に機能し続けます。
再現する手順:
1) テキストボックス HTML 要素の属性として、または DOM を使用して onpropertychange イベントを追加します。(document.form.TextboxName.onpropertychange = myHandler) 2) テキストボックスが変更されたときに onpropertychange イベントが発生することを確認します 3) コードを使用してテキストボックスの値を設定します (document.form.TextboxName.value = "New value") 4) これにより、 5) キーボードを使用してテキストボックスの値を変更します (後者の挿入、バックスペースまたは削除など) 6) 今回はイベントが発生しないことを確認します 7) キーボードを使用してテキストボックスの値を再度変更します。イベントは通常どおり発生し続けます
まず第一に、これが本当に IE のバグであり、私のコードに責任がないことを確認したいと思います。また、この問題を回避する方法についてアドバイスを求めています。テキストボックスの値に対するすべての変更を追跡したいと考えています。onkeydown などの他のイベントはすべて、値を変更するキーボード以外の方法を検出しないという点で制限されています。これは IE 8 でのみ動作する必要があります。
編集:以下のコード。自宅のブラウザー (IE9) で実行すると、記載されている問題は発生しません。ただし、IE9 には、バックスペースが onpropertychange イベントをまったく発生させないというバグがあります。モードを IE8 標準に切り替える (F12 キーを押してブラウザー モードを選択する) と、この記事で説明されているようにコードが実行されます (コードを使用してコントロールのテキスト値が設定されるまでイベントが発生します。この場合、次に入力された文字はイベントを発生させません)。
<!doctype html>
<html>
<head>
<script type="text/javascript" language="javascript">
var changingValue = false;
function onpropchange(){
if (window.event.propertyName == "value" && !changingValue) {
// Do stuff here
alert("Changed via user input");
}
}
function setTextBoxValue(val) {
var textBox = document.getElementById("foo");
changingValue = true;
textBox.value = val;
changingValue = false;
}
window.changeValue = function() {
setTextBoxValue("NEW VALUE");
}
</script>
</head>
<body>
<input id="foo" onpropertychange="onpropchange();">
<input type="button" value="change value" onclick="changeValue()">
</body>
</html>