2012-04-11 3 views
2

JavaScript를 사용하여 웹 사이트를 만들고 있습니다. JS 부분의 목적은 내 자신의 키보드 핸들러를 특정 텍스트 필드에 첨부하는 것입니다. 키 코드와 함께 경고 상자를 표시하는 세 개의 필드 결과의의 문자를 입력, 파이어 폭스, 오페라와 크롬에서
http://jsfiddle.net/k9s3n/1/
: 나는이 바이올린처럼 간단한 코드로 문제를 좁힐 관리 . 인터넷 익스플로러 (제 경우 IE8은 보통 지원하는 가장 낮은 버전입니다) 그러나 input3 만 제대로 작동합니다. 즉, 키를 놓을 때 대화 상자를 표시하는 유일한 필드입니다. 다른 두 개의 입력란에 아무런 결과도 입력하지 않으면 콘솔에 오류가 기록됩니다. keyCode is null or isn't an object (오류 메시지가 맞는지 확실하지 않아 모국어로 번역했습니다).
브라우저와 상관없이 세 번째 솔루션 만 작동하는 것으로 보입니다.하지만 제 시나리오에서는 첫 번째 또는 두 번째 솔루션을 사용해야합니다.이벤트 핸들러가 Internet Explorer에서 작동하지 않습니다.

내가 추가 조사를 위해 또 다른 바이올린 만든 : 버튼의
http://jsfiddle.net/bSdaJ/
모두를 클릭하면 메시지 상자를 표시하도록합니다. Firefox, Opera 및 Chrome에서는 상자에 "[object MouseEvent]"라고 표시되지만 IE에서는 "undefined"라고 표시됩니다.
어떻게해야합니까? 사전에 도움을 주셔서 감사합니다.

P. 첫 번째 바이올린에 표시된 것처럼 인라인 이벤트 처리를 사용하면 모든 것이 잘 작동합니다. 그러나이 프로젝트의 목표는 HTML과 JS를 완전히 분리하는 것이므로 사용할 수 없습니다. 나는 친구를 위해이 일을하고 있으며, HTML 부분을 명확하고 명확한 마크 업 코드로 만들고 싶다.

+0

합니다. 바이올린은 IE에서 당신을 위해 작동하지 않습니다? –

+0

아니요, 그렇지 않습니다. IE9는 표준을 준수하는 것 같습니다. – rhino

+0

어떤 IE 버전을 사용하고 있습니까? –

답변

4

. W3C 브라우저에서는 element.addEventListener, IE에서는 element.attachEvent을 사용하여 첨부 된 이벤트 리스너를 사용해야합니다. 대형 웹 사이트를 구축하는 경우 JS 프레임 워크를 사용해야합니다.하지만 묻지 않은 질문이 다릅니다. 프레임 워크 (가장 인기있는 jQuery)는이를 수행하는 추상적 인 메소드를 제공하지만 하나가없는 경우 브라우저 간 크로스 기능을 수행하는 간단한 함수가 있습니다.

function addEvent(element,evName,fn) { 
    if (element.addEventListener) { 
     element.addEventListener(evName,fn,false); 
    } else if (element.attachEvent) { 
     element.attachEvent('on'+evName,function(e) { 
      fn(e || window.event); 
     }); 
    } 
} 

이 간단한 함수는 브라우저의 다른 이벤트 동작을 정규화 검출 기능을 사용한다. IE는 다른 서명으로 다른 수신기 기능을 사용하며 IE는 처리기가 이벤트 객체를 인수로받는 것을 요구하는 W3C 사양을 따르지 않습니다. 대신 전역 window.event` 속성을 설정합니다.

사용 예제 : IE와 W3C 브라우저가 event.keyCode 재산에 대한 다른 접근 방법이 있는지 또한 http://jsfiddle.net/k9s3n/3/

주 (다른 브라우저 '접근법이 올바른지).

+0

종합적인 답변 주셔서 감사합니다. 또한 프레임 워크가 필요할 수도 있음을 지적 해 주셔서 감사합니다. 아마 미래의 프로젝트에서 그렇게 할 것입니다. – rhino

2

이 시도 : 당신은 (HTML 속성을 통해 부착 된 이벤트) DOM 0 이벤트를 사용하지 않아야

function clickHandler(e) { 
    if(!e) 
     e = window.event; 
    alert(e); 
} 
+0

+1 : 이것은 권장되는 해결 방법 인 것 같습니다. –

0

이 시도 : 당신의 텍스트 필드에

function funcToCall(e) 
{ 

    //alert('here'); 
    var keycode; 
    if (window.event) 
    { 
     if (window.event.keyCode == '112') { // F1 was pressed 

     // call your methods in this area 

     window.event.returnValue = false; 
     return false; 
     } 

    } 
    else if(e) 
    { 
     if (e.which == '112') { // F1 was pressed, search for other keycodes 

     // call your methods in this area 

     e.preventDefault(); 
     return false; 

     } 

    } 
} 

전화 : 그것은 IE9에서 나를 위해 작동

onKeyDown="funcToCall(event)" 
관련 문제