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

博主：筱晨吖~
发布时间：2022 年 05 月 04 日
1527 次浏览
6 条评论
1212字数
分类： Web

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

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

### 原题

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

![图10.29 显示输入的提示信息.png](/usr/uploads/2022/05/3779179892.png)

![图10.30 提示错误信息.png](https://www.13s.fun/usr/uploads/2022/05/6981270.png)

### 提示

* **按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 日