利用JavaScript和jQuery实现回车键替代Tab键

筱晨吖~

2022 年 05 月 04 日

3005 次浏览

6 条评论

1212字数

Web

记录一次JavaScript解题过程与思路

见解：由于题目过于老旧，完全按照提示要求是无法实现的，event.keyCode现为只读属性，$(selecter).keydown()相当于window.onkeydown，使用JQuery.focus()方法也可以实现同样的功能。

原题

制作按Enter键切换的输入效果。当在页面上按Enter键时，Enter键完成在表单中各个输入框之间顺序切换的功能，但是当鼠标指针停在“确定”按钮上按Enter键时，不进行切换。并且当鼠标光标在某个输人框中时，输入框后显示提示的输入信息，如图10.29所示。当鼠标光标离开输入框时，如果输入的内容不正确将显示错误的提示信息，如图10.30所示。

提示

按Enter键就能把输入焦点转移到下一个编辑框，所以要使用键盘输入事件onkeydown，它是指当键盘上的一个键被下压时，就会触发onkeydown事件。
由于按Enter键时使鼠标光标在输入框之间切换，即用Enter键代替了Tab键。
keyCode用于键盘事件，给出所按键产生的Unicode值，Enter键的Unicode码为13，Tab键的Unicode码为9，把Enter键转变为Tab键就可以了。
按下Enter键时，要判断当前鼠标指针是否在“确定，按钮上，如果在“确定”按钮上则不进行切换。

代码展示

JavaScript代码块

let flag=false; //全局变量：form表单提交判断 false禁止提交
let inIndex=-1 //全局变量 实现页面回车顺序切换 索引

$(document).ready(function(){//初始化加载

    /**用户名获得焦点 提示**/
    $('input[name=username]').focus(function(){ //获得焦点给予提示
            $(this).next().text('首位为字母的4~16个数字、字母、下划线').hide().fadeIn();
     }).blur(checkUserName); //失去焦点调用检查函数

    /**单行文本框索引赋值 从0开始**/
    allInput=$('input:not(:image)');
    for(var i=0;i<allInput.length;i++)
        allInput[i].setAttribute('index',i)

    /**回车键实现顺序切换**/
    $(document).keydown(function(e){ //监听整个网页的键盘事件
        if($('input:image').is(':hover')){ //当鼠标悬浮在提交按钮上时，检查密码
            return flag=checkUserName(); //停止后续代码执行并更新flag状态
        }
        if(e.keyCode==13){ //当按下回车 tips:回车键ASCII码为13
            if($('input:not(:image)').is(':focus')) //文本框获焦 获取焦点索引并＋1
                inIndex=parseInt($('input:not(:image):focus').attr('index'))+1;
            else //文本框未获焦 索引＋1
                inIndex++;
            if(inIndex==allInput.length) inIndex=0; //到达最后 重置
            $('input:eq('+inIndex+')').focus(); //目标索引 获焦
        };
    });
    /**image提交按钮修复**/
    $(':image').click(function(){//文本框内回车同时触发按钮点击事件解决
        if(!$('input:not(:image)').is(':focus')) //如果文本框没有获焦点
            flag = checkUserName(); //更新flag状态
    });
});
/**检查用户名 提示**/
function checkUserName(){
    userName=$('input[name=username]');
    var reg=/^[a-zA-z]\w{3,15}$/;
    if(!reg.test(userName.val())){
        userName.next().text('用户名不正确').hide().fadeIn(500);
        return false;
    }else{
        userName.next().text('');
        return true;
    }
}

HTML代码块

<div>
    <img src="image/top.jpg" alt="">
</div>
<form action="success.html" onsubmit="return flag">
    <table>
        <tr>
            <td align="right">用户名：</td>
            <td><input type="text" name="username"> <font color="red"></font></td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" name="password"><font color="red"></font></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="image" src="image/sumbit_btn.jpg"></td>
        </tr>
    </table>
</form>