Loading... **记录一次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代码块** ```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代码块** ```html <div> <img src="image/top.jpg" alt=""style=""> </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> ``` ### 总结 1. **认真审题,代码符合题意。** 2. **简化代码,增强复用性。** **若您遇到了其它类似问题可以加群请教,也可以在下方留言,站长会为您细心解惑** 最后修改:2022 年 05 月 04 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 11 如果觉得我的文章对你有用,请随意赞赏
6 条评论
不错
会java的都是大佬
java也会,但这是前端的js哈,javascript与java是两个没有任何关系的编程语言
给我更新
好的好的,学习任务先完成再