javascript实现依次输入input自动定焦


Posted in Javascript onDecember 23, 2014
<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>

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

代码很简单,功能非常实用,小伙伴们美化下就可以用到自己项目中了,是不是很炫酷

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
JS实现canvas简单小画板功能
Jun 23 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
使用原生JS实现弹出层特效
Dec 22 #Javascript
jQuery基础知识小结
Dec 22 #Javascript
jQuery异步获取json数据方法汇总
Dec 22 #Javascript
jQuery的观察者模式详解
Dec 22 #Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 #Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
最基础的Python的socket编程入门教程
2015/04/23 Python
Python中偏函数用法示例
2018/06/07 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
django-csrf使用和禁用方式
2020/03/13 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
上课看小说检讨书
2014/02/22 职场文书
我的小天地教学反思
2014/04/30 职场文书
先进教师事迹材料
2014/12/16 职场文书
起诉状范本
2015/05/20 职场文书
遗失证明范文
2015/06/19 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL