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是标准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

无法获得适用于Firefox的JavaScript代码

2 个答案: