web-dev-qa-db-ja.com

ラジオボタンのonchangeがIE8で正しく機能しない

IE8（8.0.7601.17514）での作業を余儀なくされ、次の簡単なページがあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form action=".">
    <input type="radio" name="rad" value="1" onchange="alert(1);"/>
    <input type="radio" name="rad" value="0" onchange="alert(0);" checked="checked"/>
</form>
<a href="http://google.com">some dummy link</a>
</body>
</html>

私が期待しているのは、2番目のラジオボタンが選択されているときに、最初のボタンをクリックするとすぐにアラートが発生することです。これはFFで正常に動作します。

実際に何が起きるかというと、最初のラジオをクリックしても何も起こりません。次に、要素がぼやけている場合（たとえば、他の場所、他のラジオ、ページ内のリンクなどをクリックした場合）、アラートが発生します。

これに対する回避策はありますか？

編集：

明らかに、この動作は W3C仕様 に正確に従っています

変更

Changeイベントは、コントロールが入力フォーカスを失い、フォーカスを得てからその値が変更されたときに発生します。このイベントは、INPUT、SELECT、およびTEXTAREAに対して有効です。素子。

（@ mu-is-too-shortに感謝）。

これに対する回避策は、onclick blur + focusを追加することです。

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
javascripthtmlinternet-explorerradio-button
23
Ondrej Skalicka

Internet Explorer（少なくともIE8まで）では、ラジオボタンまたはチェックボックスをクリックして値を変更しても、入力がフォーカスを失うまで、実際にはonChangeイベントはトリガーされません。

したがって、何らかの方法でぼかしイベントを自分でトリガーする必要があります。1つの提案は、次のような関数を持つことです。

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

これでonchangeイベントがトリガーされますが、ご覧のように冗長なコードであるため、onclickイベントハンドラーを使用する方がベターです。

より良い解決策は、これらすべての癖を処理するjqueryのような最新のJavaScriptライブラリを使用することです。

29
Baz1nga

技術的には、IEは実際にこれを正しく行いました。 fine仕様から ：

変更

Changeイベントは、コントロールが入力フォーカスを失い、フォーカスを得てからその値が変更されたときに発生します。このイベントは、INPUT、SELECT、およびTEXTAREAに対して有効です。素子。

したがって、変更イベントをトリガーするために、要素は要素がフォーカスを失う必要がある（つまり、ぼかしが必要）と規定しています。通常の策略は、クリックハンドラーを使用するか、他の人が提案したようにぼかしを強制することです。

8
mu is too short

onclickを使用しますが、値（またはチェックされた属性）が変更される前にイベントハンドラーを呼び出します msdn

2
sarkiroka