jsp 回车代替tab 自动切换text焦点

最新推荐文章于 2021-10-10 10:09:09 发布

weixin_34090643

最新推荐文章于 2021-10-10 10:09:09 发布

阅读量130

点赞数

文章标签： javascript ViewUI

方法一keyCode = 9（IE11以后失效）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用回车来进行切换功能</title>
<script language="javascript">
    function check() {
        //keyCode是event事件的属性,对应键盘上的按键,回车键是13,tab键是9,其它的如果不知道 ,查keyCode大全
        if (event.keyCode == 13 && event.srcElement.type == "text") {
            //srcElement是触发事件的对象,type意思是什么类型
            window.event.keyCode = 9;
        }
    }
    document.onkeydown = check;
</script>
</head>

<body>
    <input name="" type="text" />
    <input name="" type="text" />
    <input name="" type="text" />
    <input name="" type="text" />
    <input name="" type="text" />
    <input name="" type="text" />
    <input type="button" />
    <input type="password" />
</body>
</html>

方法二 body onkeydown （IE11以后失效）

<body onkeydown="if(window.event.keyCode==13){ window.event.keyCode=9}">
<input id="txtCode" type="text" />
<input id="txtCode2" type="text" />
</body>

方法三 name onKeyPress focus，有效果，繁琐不灵活

<script type="text/javascript">
    function Myenter(str) {
        if (event.keyCode == 13) {
            str.focus();
        }
    }
</script>

    <input name="id" type="text" onKeyPress="Myenter(aname)">    
    <input name="aname" type="text" onKeyPress="Myenter(asex)" />
    <input name="asex" type="text" />

方法四 name onkeypress handleEnter有效果,必须在form 里

<script type="text/javascript">
    function handleEnter(field, event) {
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
                : event.charCode;
        if (keyCode == 13) {
            var i;
            for (i = 0; i < field.form.elements.length; i++)
                if (field == field.form.elements[i])
                    break;
            i = (i + 1) % field.form.elements.length;
            field.form.elements[i].focus();
            return false;
        } else
            return true;
    }
</script>
<form action="">
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>
    <input name="" type="text" onkeypress="return handleEnter(this, event)"/>

    </form>

方法五 jquery 未测到效果

$(function() {
$("form[name='articleForm'] input:text").keypress(function(e) {
if (e.which == 13) // 判断所按是否回车键
{
var inputs = $("form[name='articleForm']").find(":text"); // 获取表单中的所有输入框
var idx = inputs.index(this); // 获取当前焦点输入框所处的位置
if (idx == inputs.length - 1) // 判断是否是最后一个输入框
{
if (confirm("最后一个输入框已经输入,是否提交?")) // 用户确认
$("form[name='articleForm']").submit(); // 提交表单
} else {
inputs[idx + 1].focus(); // 设置焦点
inputs[idx + 1].select(); // 选中文字
}
return false;// 取消默认的提交行为
}
});
});

方法六 jquery 未测到效果

  <script type="text/javascript">
        jQuery(function () {
            jQuery('input:text:first').focus();
            var $inp = jQuery('input:text');
            $inp.bind('keydown', function (e) {
                var key = e.which;
                if (key == 13) {
                    e.preventDefault();
                    var nxtIdx = $inp.index(this) + 1;
                    jQuery(":input:text:eq(" + nxtIdx + ")").focus();
                }
            });
        });    
    </script>

weixin_34090643

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsp 回车代替tab 自动切换text焦点

方法一keyCode = 9（IE11以后失效）&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;&lt;title&gt;用回车来进行切换功能&lt;/title&gt;&lt;script language
复制链接

扫一扫