javascript实现依次输入input自动定焦
更新时间：2014年12月23日 08:51:37 投稿：hebedich
这篇文章主要介绍了javascript实现依次输入input自动定焦的方法及示例代码，非常实用，这里推荐给小伙伴们
复制代码 代码如下:
<html>
<head>
<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);">
<input type="button" value="显示" onclick="showResult();">
</form>
</body>
</html>
代码很简单，功能非常实用，小伙伴们美化下就可以用到自己项目中了，是不是很炫酷
您可能感兴趣的文章:
相关文章
js实现一个弹出层并锁屏效果是每一网友所期望的效果，于是搜集整理一番，把代码晒出来和大家分享2012-12-12
使用js比较字符串是否相等的方法有很多，在本文为大家介绍一个从外国网站看到的方法，感兴趣的朋友可以参考下哈，希望对大家学习js有所帮助2013-07-07
这篇文章主要给大家简单介绍了JavaScript中运算符的优先级的相关问题，十分的实用，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要为大家详细介绍了微信小程序商城购物数量加减功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最近做项目的过程中，使用到了ES6，因为之前很少接触，所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令，所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料，需要的朋友可以参考下。2017-05-05
这篇文章主要介绍了javascript模拟实现ajax加载框的方法,实例简述了其实现过程,方法简单实用,需要的朋友可以参考下2014-10-10
Iview DatePicker 限制选择当前月份及以后的月份
文章介绍了如何使用iviewDatePicker组件限制用户只能选择当前月份及以后的月份,并提供了相关的html代码和js代码示例,感兴趣的朋友跟随小编一起看看吧2024-11-11
如何实现textarea里的不同文本显示不同颜色呢？控制textarea的style设置Textarea以及把文本放到标记里都不会起作用，下面有个不错的解决方法，感兴趣的朋友可以了解下2014-01-01
JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法
这篇文章主要介绍了如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件,本文通过图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
js中net::ERR_FILE_NOT_FOUND报错的解决
本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
最新评论