Question

将这个可爱的小脚本输入后自动更改字段。适用于IE，Chrome和Safari，但不适用于FF或Opera。 JS代码：

function fieldChange(id, e){            
            var keyID = (window.event) ? event.keyCode : e.keyCode;
            if (document.getElementById(id).value.length >= 2){
                if (keyID >= 48 && keyID <= 57 || keyID >= 96 && keyID <= 105){
                    switch(id){
                        case "textf1":
                            document.getElementById("textf2").focus();
                        break;                              
                        case "textf2":                              
                            document.getElementById("textf3").focus();
                        break;                      
                        case "textf3":
                            if (document.getElementById(id).value.length >= 4){
                                document.getElementById("nubPcode").focus();
                            }
                        break;                      
                    }
                }
            }

HTML：

                            <div class="privateOrderSchema">
                                <input type="text" id="textf1" name="textf1" maxlength="2" size="4" onKeyUp="fieldChange('textf1')"/>-
                                <input type="text" id="textf2" name="textf2" maxlength="2" size="4" onKeyUp="fieldChange('textf2')" />-
                                <input type="text" id="textf3" name="textf3" maxlength="4" size="5" onKeyUp="fieldChange('textf3')" />
                            </div>
                            <div class="privateOrderSchema">
                                <input type="text" id="nubPcode" name="nubPcode" size="4" maxlength="4" />
                                <br />
                            </div>

有人知道如何在这种情况下发送“e”var吗？

Tnx all：D ur gr8！

Answer 1

onKeyUp="fieldChange('textf1')"

未在参数中传递event对象。代替：

onkeyup="fieldChange('textf1', event)"

这适用于IE（因为event引用全局变量window.event）和其他浏览器（因为event引用您正在创建的函数的单个本地参数on...事件处理程序属性）。

您现在可以从if (window.event)函数中删除fieldChange代码，因为事件将始终传入。在您需要事件的地方，最好先查看参数回到IE版本。通常喜欢：

function somethingHandler(event) {
    event= event || window.event;
    ...
}

清理标记可以做的另一件事是在事件处理程序中使用this：

onkeyup="fieldChange(this, event)"

现在fieldChange不必按id查找正确的元素，因为您已经有了对它的引用。

更好的是，丢失事件处理程序属性并更加不引人注目地绑定。您也可以使用maxLength属性，而不是在长度逻辑中建立关于重新聚焦发生的确切时间。例如：

<input type="text" name="textf1" maxlength="2" class="movetonext" />
<input type="text" name="textf2" maxlength="2" class="movetonext" />
<input type="text" name="textf3" maxlength="4" class="movetonext" />

<script type="text/javascript">
    var elements= document.getElementById('myform').elements;
    for (var i= elements.length; i-->0;)
        if (elements[i].className==='movetonext')
            elements[i].onkeyup= checkMoveToNext;

    function checkMoveToNext() {
        if (this.value.length>=this.maxLength) {
            var elements= this.form.elements;
            var ix= List_indexOf(elements, this);
            ix= (ix+1)%elements.length;
            elements[ix].focus();
        }
    }

    function List_indexOf(list, item) {
        for (var i= 0, n= list.length; i<n; i++)
            if (list[i]===item)
                return i;
        return -1;
    }
</script>

Answer 2

我想，像下面这样的东西会起作用。它仍然通过元素的属性附加处理程序，这实际上是不需要的。他们应该通过javascript附加。

在此次尝试中，您将event，this和可选元素ID 发送到fieldChange功能。它在那里很好地评论，但简而言之，它做到了这一点：

在keyup上，检查元素当前值的长度。如果它与maxlength中设置的长度相等（或更大），则执行一些魔法（如果它更长，则将值截断为maxlength）。在此键盘检查中，不要对键码9和16执行任何操作（这允许将Tab键和shift-tabbing转换为“完整”输入元素）。
“魔术”正在跳跃到下一个元素。这将是形式中的下一个元素或具有id的元素，该元素可选地发送（explicitNextId）。

现在有16行js，不包括评论。 HTH。

<body>
    <form action="#">
        <div class="privateOrderSchema">
            <input type="text" id="textf1" name="textf1" maxlength="2" size="4" onKeyUp="fieldChange(event, this)"/>-
            <input type="text" id="textf2" name="textf2" maxlength="2" size="4" onKeyUp="fieldChange(event, this)" />-
            <input type="text" id="textf3" name="textf3" maxlength="4" size="5" onKeyUp="fieldChange(event, this, 'nubPcode')" />
        </div>
        <div class="privateOrderSchema">
            <input type="text" id="nubPcode" name="nubPcode" size="4" maxlength="4" />
        </div>
    </form>

    <script type="text/javascript">
    function fieldChange(event, elem, explicitNextId) {
        // Obtain useable event
        event = window.event ? window.event : event;            
        var keyCode = event.keyCode, len = elem.value.length;
        // tab, shift (catches shift/tab) or small length, do nothing:
        if (keyCode===9 || keyCode===16 || len < elem.maxLength) {return;}
        // truncate value if exceding limit
        if (len>elem.maxLength) {elem.value=elem.value.substr(0, len-1);}
        // Get the next input to jump to (either from the id explicitly sent, or next in form)
        var next = getNextElement(elem, explicitNextId);
        // If one was found, focus it
        if (next) {next.focus();}
    }
    function getNextElement(elem, explicitNextId) {
        // From explicit id
        if (typeof explicitNextId!=='undefined') {return document.getElementById(explicitNextId);}
        // Get next in form
        var inputs = elem.form.elements;
        for (var idx=0, len=inputs.length-1, candidate; idx<len; ++idx) {
            candidate = inputs.item(idx);
            if (candidate===elem) {return inputs.item(idx+1);}
        }
    }
    </script>
</body>

在下面的bobince提供的有用评论之后，我将indexOf函数中的一些Array/slice和getNextElement内容更改为适用于IE的内容。

FF的事件问题

2 个答案: