Firefox에서 작동 할 JavaScript 코드를 얻을 수 없습니다.

Question

양식 필드가 최대 길이 (이 예제에서는 1)에 도달하면 커서가 다음 필드로 이동하는 코드를 작성했습니다.

JS :

window.onload=function(){ 
var container = document.getElementsByClassName("container")[0]; 
container.onkeyup = function(e) { 
    var target = e.srcElement; 
    var maxLength = parseInt(target.attributes["maxlength"].value, 10); 
    var myLength = target.value.length; 
    if (myLength >= maxLength) { 
     var next = target; 
     while (next = next.nextElementSibling) { 
      if (next == null) 
       break; 
      if (next.tagName.toLowerCase() == "input") { 
       next.focus(); 
       break; 
      } 
     } 
    } 
} 
} 

HTML :

<div class="container"> 
<label><input type="text" name="pin1" maxlength="1" pattern="\d{1}" onkeypress="return isNumber(event)" required/>&nbsp;-&nbsp; 
<input type="text" name="pin2" maxlength="1" pattern="\d{1}" onkeypress="return isNumber(event)" required/>&nbsp;-&nbsp; 
<input type="text" name="pin3" maxlength="1" pattern="\d{1}" onkeypress="return isNumber(event)" required/>&nbsp;-&nbsp; 
<input type="text" name="pin4" maxlength="1" pattern="\d{1}" onkeypress="return isNumber(event)" required/> 
</label> 
</div> 

양식은 구글 크롬 및 기타 모바일 브라우저에서 잘 작동하지만, 파이어 폭스에서 작동하지 않습니다.

제발 내가 크로스 브라우저에서 작동하도록 도와주세요.

Answer 1

비표준 이벤트 속성 srcElement을 사용하고 있습니다. MDN on Event.srcElement에서

var target = e.srcElement; 

:

Event.srcElement는 표준 Event.target 속성에 대한 고유의 별명입니다. 이전 버전의 Microsoft Internet Explorer에만 적용됩니다.

Chrome에서 작동하는 유일한 이유는이 브라우저가 현재 호환성을 이유로이 속성의 별칭이기 때문입니다.

사용이 대신 :

var target = e.target; 

모든 버전의 IE가 srcElement을 필요로하는 경우는 사용되지 않습니다, 그래서이 속성 오늘을 사용할 이유가 없다.

(나는이 문제가 될 것입니다 다른, 당신이 isNumber 어딘가에 정의 있으리라 믿고있어.)

Answer 2

Chrome과 Firefox에서 isNumber() 함수가 정의되지 않았습니다.

다른 문제는 비표준 이벤트 속성 srcElement를 사용 중이므로 대신 e.target을 사용해야합니다. https://developer.mozilla.org/en/docs/Web/API/Event/srcElement