火狐谷歌如何用JS实现按回车实现tab功能-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20531 次

火狐谷歌怎么用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, valu

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>