2012-05-14 39 views
23

Tôi buộc phải làm việc với IE8 (8.0.7601.17514) và tôi có trang đơn giản này:onchange trên radiobutton không hoạt động chính xác trong IE8

<!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> 

Những gì tôi mong đợi là như nút radio thứ hai được chọn , nhấp vào người đầu tiên sẽ ngay lập tức nâng cao Cảnh báo. Điều này hoạt động tốt trong FF.

Điều thực sự xảy ra là khi tôi nhấp vào đài phát thanh đầu tiên, không có gì xảy ra. Sau đó, khi phần tử bị mờ (ví dụ: tôi nhấp vào một nơi khác, radio khác, một số liên kết trong trang, vv), THEN cảnh báo được nâng lên.

Có cách giải quyết nào cho vấn đề này không?

EDIT:

rõ ràng hành vi này là chính xác theo W3C spec

thay đổi

Các sự kiện thay đổi xảy ra khi một điều khiển mất tập trung đầu vào và giá trị của nó đã được sửa đổi kể từ khi đạt được tiêu điểm. Sự kiện này hợp lệ cho INPUT, SELECT và TEXTAREA. thành phần.

(nhờ @ mu-quá-ngắn).

Cách giải quyết vấn đề này là để thêm một mờ onclick + Trọng tâm:

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


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

làm việc tốt cho tôi trong IE8 - http://jsfiddle.net/uMD9h/ – Pranav

+0

@Pranav nope, thử liên kết u được gửi trong ie8 và nó sẽ không hoạt động –

+0

lạ ... nó đang làm việc hoàn toàn tốt cho tôi trong IE8 với cửa sổ XP. – Pranav

Trả lời

29

Trong Internet Explorer (tối thiểu là IE8), nhấp vào nút radio hoặc hộp kiểm để thay đổi giá trị của nó không thực sự kích hoạt sự kiện onChange cho đến khi đầu vào mất tiêu điểm.

Vì vậy bạn cần phải bằng cách nào đó kích hoạt các sự kiện mờ mình .. một suggestiong sẽ có một chức năng: như sau:

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


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

Bây giờ sự kiện onchange của bạn nên được kích hoạt nhưng như bạn có thể nhìn thấy nó là không cần thiết vì vậy bạn nên sử dụng trình xử lý sự kiện onclick.

Các giải pháp tốt hơn là sử dụng một hiện đại thư viện javascript như jquery mà xử lý tất cả những tật cho bạn ..

+0

tôi nghĩ rằng onchange được thiết kế cho điều đó ..cho phép điều khiển không bị mất tiêu điểm nó có nghĩa là sửa đổi vẫn đang diễn ra ... – Pranav

+1

đã đồng ý .. Tôi phải trả lời cho câu hỏi. – Baz1nga

+0

http://stackoverflow.com/questions/1498987/ie-html-radio-change-event –

2

sử dụng onclick, nhưng tức là gọi xử lý sự kiện trước khi giá trị (hoặc thuộc tính kiểm tra) được thay đổi msdn

+0

lý do tại sao onclick ?? onchange là thích hợp cho việc này. – Pranav

+1

vì thay đổi chỉ cháy khi phần tử bị mất tiêu điểm tức là – sarkiroka

8

Về mặt kỹ thuật, IE thực sự có quyền này. Từ fine specification:

thay đổi

Các sự kiện thay đổi xảy ra khi một điều khiển mất tập trung đầu vào và giá trị của nó đã được sửa đổi kể từ khi đạt được trọng tâm. Sự kiện này hợp lệ cho INPUT, SELECT và TEXTAREA. thành phần.

Vì vậy, để sự kiện thay đổi được kích hoạt, đặc điểm kỹ thuật cho biết yếu tố phải mất tiêu điểm (tức là yêu cầu làm mờ).Kludge thông thường là sử dụng trình xử lý nhấp chuột hoặc ép mờ như những người khác đã đề xuất.

+0

+1. hoàn toàn đồng ý với bạn. – Pranav

Các vấn đề liên quan