当前位置: 代码迷 >> JavaScript >> 火狐谷歌如何用JS实现按回车实现tab功能
  详细解决方案

火狐谷歌如何用JS实现按回车实现tab功能

热度:360   发布时间:2012-04-02 19:58:59.0
火狐谷歌怎么用JS实现按回车实现tab功能
各位大侠~~火狐谷歌怎么用JS实现按回车实现tab功能?

网上一般都是支持IE的

感谢啊~~

------解决方案--------------------
其实都keydown事件
只是ie用window.event.keyCode
ff用e.which


------解决方案--------------------
function SetKeyDown(form){var is=form.getElementsByTagName('input');for(var i=0;i<is.length;i++){if(is[i].type=='text'||is[i].type=='password'){if(window.event)is[i].onkeydown=function(){if(event.keyCode==13)event.keyCode=9;};else is[i].onkeydown=function(e){if(e.keyCode==13){e.preventDefault();for(var i=0;i<this.form.elements.length;i++)if(this==this.form.elements[i]){this.form.elements[i+1].focus();break;}}};}}}

SetKeyDown(document.forms[0]);
------解决方案--------------------
主要就是tabIndex的使用 按顺序获取焦点,不想获取焦点的设置为-1
HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>回车切换焦点,兼容FF</title>

<script type="text/javascript">

    document.onkeydown=function(event){

        var e=event||window.event;

        var keyCode=e.keyCode||e.which;//e.which 兼容FF

        var target=e.srcElement||e.target;

            if (keyCode ==13) {   

                var tabindex=target.tabIndex+1;

                if( tabindex==6) tabindex=1;

                document.getElementById('elem'+tabindex).focus();

            }

    }

</script>

</head>



<body>

<form>

<input type="text" tabindex="1" id="elem1"  />

<input type="text" value="readonly" readonly="readonly" tabindex="-1" />

<input type="button" value="click" tabindex="2"  id="elem2" />

<input type="text" tabindex="3" id="elem3"  />

<select tabindex="4" id="elem4" >

    <option value="1">select</option>

  <option value="2">select2</option>

</select>

<input type="button" value="submit" tabindex="5" id="elem5" />

</form>

</body>

</html>

------解决方案--------------------
HTML code
<!doctype html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form id="myform">
            <input type="text" id="elem1"  />
            <input type="text" value="readonly" readonly="readonly" tabIndex="-1" />
            <input type="button" value="click" id="elem2" />
            <input type="text" id="elem3"  />
            <select id="elem4" >
                <option value="1">select</option>
                <option value="2">select2</option>
            </select>
            <input type="button" value="submit" id="elem5" />
        </form>
        <script>
            var form = document.getElementById("myform"),
                elems = form.getElementsByTagName("*"),
                controls = [];
            for(var i = 0, len = elems.length; i < len; i++){
                if(elems[i].tabIndex !== -1 && elems[i].nodeName !== "OPTION"){
                    controls.push(elems[i]);
                }
            }
            function indexOf(arr, value){
                var ret = -1;
                for(var i = 0, len = arr.length; i < len; i++){
                    if(value === arr[i]){
                        ret = i;
                        break;
                    }
                }
                return ret;
            }
            form.onkeyup = function(event){
                var e = event || window.event,
                    target = e.target || e.srcElement;
                if(e.keyCode === 13){
                    var index = indexOf(controls, target),
                        nextIndex = index + 1 < controls.length ? index + 1 : 0;
                    console.log(controls[nextIndex]);
                    controls[nextIndex].focus();
                    return false;
                }
            }
            
        </script>
    </body>
</html> 
  相关解决方案