javascript - 无法让 JavaScript 代码在 Firefox 上运行

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。

var target = e.srcElement;

来自MDN on Event.srcElement :

Event.srcElement is a proprietary alias for the standard Event.target property. It is specific to old versions of Microsoft Internet Explorer.

它在 Chrome 中工作的唯一原因是，出于兼容性原因，该浏览器目前还为该属性设置了别名。

改用这个:

var target = e.target;

如果 IE 需要 srcElement，则每个版本都已过时，因此现在没有理由使用此属性。

(我假设您在某处定义了 isNumber，否则这也会是一个问题。)