js 回车转成TAB(利用tabindex)

最新推荐文章于 2021-10-10 10:09:09 发布

原创最新推荐文章于 2021-10-10 10:09:09 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#input #xhtml #button #html

html 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML表单示例，通过JavaScript实现当用户按下Enter键时，焦点能够自动切换到下一个输入框的功能。此方法适用于需要快速填写多个字段的表单场景。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function enterToTab(event, input) {
	var e = event?event:window.event;
	var form = document.getElementById('form1');
	if(e.keyCode == 13) {
		var tabindex = input.getAttribute('tabindex');
		tabindex++;
	    var inputs = form.getElementsByTagName('input');
	    for(var i=0,j=inputs.length;  i<j; i++) {
		    if (inputs[i].getAttribute('tabindex') == tabindex) {
			    inputs[i].focus();
		        break;
		    }
	    }
	}
}
</script>
</head>
<body>
<form id="form1">
<input type="text"  tabindex="1" onkeydown="enterToTab(event,this);"/>
<input type="text"   tabindex="2" onkeydown="enterToTab(event,this);"/>
<input type="text"   tabindex="3" onkeydown="enterToTab(event,this);"/>
<input type="text"   tabindex="4" onkeydown="enterToTab(event,this);"/>
<input type="button" value="click me" onclick="alert('I'm here!')"  tabindex="5" onkeydown="enterToTab(event,this);"/>
</form>
</body>
</html>