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> 

フォームでは、Google Chromeと他の携帯電話のブラウザ上でうまく動作しますが、それは、Firefox上で動作していません。

クロスブラウザで動作させるのを手伝ってください。

Answer 1

問題は、非標準のイベントプロパティsrcElementを使用していることです。 MDN on Event.srcElementから

var target = e.srcElement; 

：

Event.srcElementは標準Event.targetプロパティの独自の別名です。これは、Microsoft Internet Explorerの旧バージョンに固有です。

Chromeで動作する唯一の理由は、このブラウザが互換性の理由からこのプロパティの別名になっているからです。

利用代わりに、この：

var target = e.target; 

すべてのバージョンsrcElementを必要とIEは時代遅れなので、今日はこのプロパティを使用する理由はありません場合。

（私はあなたがどこかに定義されたisNumberを持っていると仮定している、他の本でも問題になります。）

Answer 2

ChromeとFirefoxの両方で、isNumber（）関数は定義されていません。

その他の問題は、標準以外のイベントプロパティsrcElementを使用していることです。代わりにe.targetを使用する必要があります。 https://developer.mozilla.org/en/docs/Web/API/Event/srcElement