HTML ONCHANGE/ONBLUR 호환성
-
20-09-2019 - |
문제
현재 IE를 포함한 모든 브라우저와 IE를 포함하여 버전 6으로 호환되는 웹 사이트를 작성하고 있습니다.
특히이 두 이벤트와의 호환성 문제에 대해 궁금했습니다. <input>
태그 type='text'
.
- onblur
- onchange
검색에서 혼합 된 응답과 불완전한 목록이 발견되었습니다.
구체적으로, 질문은 다음과 같습니다.
- 위의 두 이벤트에 알려진 문제가 있습니까 (다른 HTML 이벤트로 확장 될 수 있음)?
- 그렇다면 이러한 문제를 해결하기 위해 어떤 방법을 사용할 수 있습니까?
많은 도움을 주셔서 감사합니다 :)
해결책
모든 브라우저는 텍스트 상자에만 사용하는 경우 이러한 이벤트를 상당히 지원해야합니다. 당신이 확인하면 QuirksMode 이벤트 호환성 테이블, IE는 라디오 버튼 및 확인란의 변경 이벤트에 문제가 있음을 알 수 있습니다.
브라우저에서 JavaScript 이벤트에 익숙하지 않은 경우 IE가 표준과 다르게 행동하기로 결정한 사실 덕분에 이벤트 모델이 엉망이라는 것을 알 수 있습니다. 이 문제를 극복하기 위해 JavaScript 프레임 워크를 사용해야합니다 처럼 jQuery, 유아, 도조, mootools, extjs, 또는 폐쇄. 이러한 프레임 워크는 차이점을 부드럽게하므로 다른 브라우저의 차이점과 버그를 처리 할 필요가 거의 없습니다. 거기 있습니다 Codinghorror에 관한 훌륭한 기사 사이트에서 JavaScript를 사용하려는 경우 JavaScript 프레임 워크 사용을 고려해야하는 이유를 설명합니다. 왜 JavaScript 프레임 워크를 사용해야합니다.
또한 브라우저 이벤트에 익숙하지 않은 경우 완전히 이해하십시오. OnChange와 Onblur의 차이.
다른 팁
인터넷 익스플로러의 모든 이벤트와 이 하나.
이벤트 처리 및 기타 많은 문제에 대한 일반적인 해결책은 개발자가 자신의 혈액을 피해 자신의 피를 피하기 위해 자신의 혈액을 피하고 모든 IE (및 몇 가지 다른) 이상한 기묘함을 사용하는 JavaScript 프레임 워크를 사용하는 것입니다. 도조. Dojo 사람들이 그 페이지에서 말하는 것처럼 :
"지원"이라는 단어는 Dojo와 Dijit에게 매우 특정한 것을 의미합니다. Dojo Core와 Dijit은 브라우저를 지원한다는 말에서 사용 가능한 기능의 100%가 작동하고 접근성이 올바르게 처리되며 모든 국제화 및 현지화가 지원된다는 것을 의미합니다. 이것은 매우 High Bar는 또한 Opera와 같은 브라우저가 Dijit의 "지원"이라고 말하지 않을 수도 있지만, 그것이 모두 작동 할 가능성이 높지만, 우리가 일할 수 없었던 경고가있을 수 있습니다 (그러한 경고가있을 수 있습니다. 오페라의 접근성 고리).
이 매우 높은 바 레벨에서 "지원 된"것으로 주장하는 브라우저는 (Dojo 1.3.2 기준) IE 6 ~ 8, Safari 3.1 ~ 4, Firefox 2 ~ 3.5, Chrome 1 ~ 2입니다 (이벤트를 포함한 핵심 기능) 취급, Opera, Konqueror, FF 1.5, ...)에서도 작동합니다.
jQuery를 사용하는 경우 다음을 시도하십시오.
$('input.text').click(function () {
if (this.value == this.defaultValue) {
this.value = '';
}
});
$('input.text').blur(function () {
if (this.value === '') {
this.value = this.defaultValue;
}
});
$("input:text")
모든 텍스트 입력 필드를 타겟팅하려는 경우