文本框自动切换焦点

版权声明：转载来源 《张益达的博客》 https://blog.csdn.net/weixin_44538399 https://blog.csdn.net/weixin_44538399/article/details/87892951

文本框自动切换焦点

在输入电话号码的时候，当第一个文本框输入的值的长度达到最大值时，自动将鼠标焦点移至下一个文本框，可以给使用者提供便利。那么这种功能是如何实现的呢？

首先搭建好页面，使用了三个文本框，并设置其最大长度：

<form style="display:inline-block" id="SIMNuber">
   	电话号码：
   	<input type="text" maxlength="3" class="shorttxt" onkeyup="moveNextThr(this,0)" value=""> -
   	<input type="text" maxlength="4" class="shorttxt" onkeyup="moveNext(this, 1)" value=""> -
   	<input type="text" maxlength="4" class="shorttxt" onkeyup="moveNext(this, 2)" value="">
</form>

接下来就开始写方法：

function moveNext(object,index){
	if(object.value.length == 4){
		document.forms[0].elements[index+1].focus();
	}
	
}

判断该文本框内值的长度，若长度等于“4”，则使当前文本框的下一个文本框获得焦点(index+1).focus()。

同理，通过键值获取到键盘删除键，当按下删除键时，文本框里没有值，则将鼠标焦点跳到上一个文本框。

if(object.value.length==0){
	window.onkeyup=function(evn){
		if(evn.keyCode==8){
			document.forms[0].elements[index-1].focus();
		}
	}
}

三个文本框输入完成后，需要将值拼接起来

function showResult(){
	var f = document.forms[0];
	var result="";
	
	for(var i = 0; i<3 ;i++){
		result += f.elements[i].value;
	}
	$("#console").val(result);
}

forms返回对文档中所有 Form 对象引用。然后用for循环遍历值