记录一次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>
总结
- 认真审题,代码符合题意。
- 简化代码,增强复用性。
若您遇到了其它类似问题可以加群请教,也可以在下方留言,站长会为您细心解惑
版权属于:筱晨’s Blog
本文链接:https://www.13s.fun/220.html
本博客所有文章除特别声明外,均采用 知识共享署名 4.0 国际许可协议 许可协议。转载请注明来自 筱晨's Blog!
6 条评论
不错
会java的都是大佬
java也会,但这是前端的js哈,javascript与java是两个没有任何关系的编程语言
给我更新
好的好的,学习任务先完成再