javascript 事件表单焦点tab切换_如何让tab 切换焦点在指定的表单内循环切换-CSDN博客

本文链接：https://blog.csdn.net/cdcdhj/article/details/117203938

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<input id="input1" type="text" placeholder="只可以输入数字">
			<input id="input2" type="text" placeholder="只可以输入汉字">
			<span id="tips"></span>
		</div>
		
		<script language="javascript">
				if(box.addEventListener){
					box.addEventListener('focusin',fnIn);
					box.addEventListener('focusout',fnOut);
				}else{
					box.onfocusin=fnIn;
					box.onfocusout=fnOut;
				}
				function fnIn(e){
					e=e||event;
					var target=e.target||e.srcElement;
					target.style.backgroundColor='lightgreen';
				}
				function fnOut(e){
					e=e||event;
					var target=e.target||e.srcElement;
					target.style.backgroundColor='initial';
					if(target===input1){
						if(!/^\d*$/.test(target.value.trim())){
							target.focus();
							tips.innerHTML='只能输入数字，请重新输入';
							setTimeout(function(){
								tips.innerHTML='';
							},1000);
						}
					}
					if(target===input2){
						if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
							target.focus();
							tips.innerHTML='只能输入汉字，请重新输入';
							setTimeout(function(){
								tips.innerHTML='';
							},1000);
						}
					}
				}
		</script>
	</body>
</html>

另一个版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="javascript" src="./shijian.js"></script>
	</head>
	<body>
		<div id="box">
			<input id="input1" type="text" placeholder="只可以输入数字">
			<input id="input2" type="text" placeholder="只可以输入汉字">
			<span id="tips"></span>
		</div>
		
		<script language="javascript">
			var box=document.getElementById('box');
			if(box.addEventListener||box.attachEvent){
				EventUtil.addHandler(box,'focusin',fnIn);
				EventUtil.addHandler(box,'focusout',fnOut);
			}
				function fnIn(e){
					e=EventUtil.getEvent(e);
					var target=EventUtil.getTarget(e);
					target.style.backgroundColor='lightgreen';
				}
				function fnOut(e){
					e=EventUtil.getEvent(e);
					var target=EventUtil.getTarget(e);
					target.style.backgroundColor='initial';
					if(target===input1){
						if(!/^\d*$/.test(target.value.trim())){
							target.focus();
							tips.innerHTML='只能输入数字，请重新输入';
							setTimeout(function(){
								tips.innerHTML='';
							},1000);
						}
					}
					if(target===input2){
						if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
							target.focus();
							tips.innerHTML='只能输入汉字，请重新输入';
							setTimeout(function(){
								tips.innerHTML='';
							},1000);
						}
					}
				}
		</script>
	</body>
</html>