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>
代码很简单，功能非常实用，小伙伴们美化下就可以用到自己项目中了，是不是很炫酷
您可能感兴趣的文章:
相关文章
filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，这篇文章主要介绍了JavaScript数组filter方法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JavaScript实现的伸展收缩型菜单代码,可实现JavaScript响应鼠标事件动态遍历及修改页面元素属性的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了webpack快速上手之搭建cesium三维地球环境,本文使用的是webpack5，webpack5 升级后默认是不支持polyfill的，编译时会报错，本文主要介绍了Cesium以及Webpack的使用，如何将Cesium一步步地集成到Webpack中，需要的朋友可以参考下2023-11-11
这篇文章主要介绍了20多个小事例带你重温ES10新特性(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下2023-12-12
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)
这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了微信公众号网页分享功能开发的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了JS实现很实用的对联广告代码,可实现固定相对位置悬浮展示及跟随屏幕上下滑动等功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
下面小编就为大家带来一篇JavaScript 控制字体大小设置的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
最新评论