Javascript FF的事件问题_Javascript_Html_Firefox_Events

Javascript FF的事件问题

javascript html firefox events

Javascript FF的事件问题,javascript,html,firefox,events,Javascript,Html,Firefox,Events,制作了这个可爱的小脚本，可以在输入后自动更改字段。在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){

制作了这个可爱的小脚本，可以在输入后自动更改字段。在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;                      
                    }
                }
            }

函数字段更改（id，e）{
var-keyID=（window.event）？event.keyCode:e.keyCode；
if（document.getElementById（id）.value.length>=2）{
如果（keyID>=48&&keyID=96&&keyID=4）{
document.getElementById（“nubPcode”）.focus（）；
}
打破
}
}
}

HTML:

-
-

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

Tnx全部：你的gr8

onKeyUp="fieldChange('textf1')"

未在参数中传递

事件

对象。相反：

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

这在IE（因为

event

引用全局变量

window.event

）和其他浏览器（因为

event

引用使用

on…

事件处理程序属性创建的函数的单个局部参数）中都有效

现在可以从

fieldChange

函数中删除

if（window.event）

代码，因为事件将始终传入。在确实需要事件的地方，最好先嗅探参数，然后再返回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>


var elements=document.getElementById（'myform'）.elements；
对于（var i=elements.length；i-->0；）
if（元素[i].className=='movetonext'）
元素[i].onkeyup=checkMoveToNext；
函数checkMoveToNext（）{
if（this.value.length>=this.maxLength）{
var元素=this.form.elements；
var ix=列表索引（元素，本）；
ix=（ix+1）%elements.length；
元素[ix]。焦点（）；
}
}
功能列表\索引（列表，项目）{
对于（var i=0，n=list.length；i，我认为下面这样的东西会起作用。它仍然通过元素的属性附加处理程序，这是不需要的。它们应该通过javascript附加
在本次尝试中，您将事件
、此
和可选元素id发送到字段更改
函数。下面对其进行了很好的注释，但简单地说，它可以做到：
在键控更新时，检查元素当前值的长度。如果长度等于（或大于）在maxlength
中设置的长度，则执行一些魔术（如果长度更长，则将值截断为maxlength
）。在该键控更新检查中，不要对键控代码9和16执行任何操作（这允许进行制表并将制表转换为“完全”）输入元素）。

“魔法”正在跳到下一个元素。它可能是格式中的下一个元素，也可能是id
可选择发送的元素（explicitNextId
）
现在已经有16行js了，不包括评论
<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>


-
-
函数字段更改（事件、元素、显式文本ID）{
//获取可用事件
event=window.event？window.event:event；
var keyCode=event.keyCode，len=elem.value.length；
//tab、shift（捕捉shift/tab）或小长度，不执行任何操作：
if（keyCode==9 | | keyCode==16 | | lenelem.maxLength）{elem.value=elem.value.substr（0，len-1）；}
//获取下一个要跳转到的输入（从显式发送的id或表单中的下一个）
var next=getNextElement（elem，explicitNextId）；
//如果找到了一个，就聚焦它
if（next）{next.focus（）；}
}
函数getNextElement（elem，explicitNextId）{
//从显式id
if（typeof explicitNextId！='undefined'）{return document.getElementById（explicitNextId）；}
//取得下一个成绩
var输入=元素形式元素；
对于（var idx=0，len=inputs.length-1，候选者；idx您是否尝试过不引人注目的方法？document.getElementById（'textf1'）。onkeyup=document.getElementById（'textf2'）。onkeyup=document.getElementById（'textf3'）。onkeyup=function（）{fieldChange（this.id）；}；如果没有宗教性的“just use jQuery”，我们能不能就JavaScript的工作机制提出一个问题回复？jQuery不是唯一的JS库或脚本编写方法。它远非完美无缺，通常都有一些有问题的设计决策和使用它可能存在的缺点。Thanx，这就解决了它！不知道如何发送事件，当添加事件时，它在ff中也能很好地工作！Thanx！很好的补充，等我得到消息后再去研究它们下班回家；）@s4v10r作为Jquery的home go…先做它，然后再做这些事情..你可以使用Jquery编写更好的代码..没有跨浏览器问题..亲爱的上帝.这种狂热从未停止过.在潜在的主机对象上调用Array.slice
这样的方法通常是不合乎犹太教义的，比如HTMLCollection
.无论如何，ECMAScript未定义构造函数属性Arr
<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>