javascript 一个文本框输入完毕后自动跳转到下一个文本框的方法

最新推荐文章于 2019-12-23 10:20:25 发布

蟹道人

最新推荐文章于 2019-12-23 10:20:25 发布

阅读量8.6k

点赞数

分类专栏： javascript基础部分学习文章标签： javascript html

本文链接：https://blog.csdn.net/csdt_csdt/article/details/11678105

版权

javascript基础部分学习专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <title>js24.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
	<!-- 输入完毕之后光标自动移动到下一个框的方法 -->
	
	<script type="text/javascript">
	
	function moveNext(object,index){
		
		if(object.value.length == 4){
			
			document.forms[0].elements[index+1].focus();
		}
		
	}
	
	function showResult(){
		
		var f = document.forms[0];
		var result="";
		
		for(var i = 0; i<4 ;i++){
			
			result += f.elements[i].value;
		}
		
		alert(result);
		
	}
	</script>
	
  </head>
  
  <body onload = "document.forms[0].elements[0].focus();">
    <form>
    <input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,0);">-    
    <input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,1);">- 
    <input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,2);">- 
    <input type = "text" size = 3 maxlength=4 onkeyup = "moveNext(this,3);"><br>
    
    <input type = "button" value = "显示所有" onclick = "showResult();">
    </form> 
  </body>
</html>

蟹道人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript 一个文本框输入完毕后自动跳转到下一个文本框的方法

js24.html --> function moveNext(object,index){ if(object.value.length == 4){ document.forms[0].elements[index+1].focus(); } } function show
复制链接

扫一扫