input输入框点击回车切换到下一个输入框功能

直接上代码：

HTML：

<form class="layui-form" action="../in" id="form" method="post" name='Form'>   <div class="layui-form-item"><label class="layui-form-label">货架条形码:</label><div class="layui-input-inline"><input type="text" name="d1" required lay-verify="required" autocomplete="off" class="layui-input"/></div></div><div class="layui-form-item"><label class="layui-form-label">商品条形码:</label><div class="layui-input-inline"><input type="text" name="d2" required lay-verify="required" autocomplete="off" class="layui-input"/></div></div>
</form>

JavaScript：

方法一：回车触发后input框来回切换

function focusNextInput(thisInput) {var inputs = document.getElementsByTagName("input");for(var i = 0;i<inputs.length;i++){// 如果是最后一个，则焦点回到第一个 if(i==(inputs.length-1)){inputs[0].focus(); break;}else if(thisInput == inputs[i]){inputs[i+1].focus(); break; //不加最后一行eles就直接回到第一个输入框}else { //最后的eles是添加的表单提交方法(如果想实现登陆，可以写入登陆方法)document.getElementById("form").submit(); //直接form提交}}
}//回车触发函数
$("input").keydown(function(event){if (event.keyCode == 13) {focusNextInput(this);}
});

方法二：一样的方式两种方法写的：

EL-1：
//响应回车键按下的处理
$("#form").on("keydown","input",function(){var e = event || window.event || arguments.callee.caller.arguments[0];
//判断是否按键为回车键if(e && e.keyCode==13) {var inputs = $("#form input");var idx = inputs.index(this);     // 获取当前焦点输入框所处的位置if (idx == inputs.length - 1) {       // 判断是否是最后一个输入框if (confirm("最后一个输入框已经输入,是否提交?"))$("#form").submit(); // 提交表单} else {inputs[idx + 1].focus(); // 设置焦点inputs[idx + 1].select(); // 选中文字}}
});*************************************************************************************************************
EL-2：
$("form[name='Form'] input:text").keypress(function(e) {if (e.which == 13) {// 判断所按是否回车键var inputs = $("form[name='Form']").find(":text"); // 获取表单中的所有输入框var idx = inputs.index(this); // 获取当前焦点输入框所处的位置if (idx == inputs.length - 1) {// 判断是否是最后一个输入框if($('input[name="d1"]').val()==''||$('input[name="d2"]').val()==''){layer.msg('条码不能为空');return false;}$("form[name='Form']").submit(); // 提交表单} else {inputs[idx + 1].focus(); // 设置焦点inputs[idx + 1].select(); // 选中文字}return false;// 取消默认的提交行为}
});

上面的方法属于点击回车手动切换到下一个输入框，下面的方法是适用于输入框输入的值时固定位数时来进行自动切换的方法：

//当上一个输入框到固定值时  直接切换到下一个输入框（这里自定义的是三位）
var Form=document.getElementById('form');
var input=Form.getElementsByTagName('input');
var iNow=0;
type  = !-[1,] ? 'onpropertychange' : 'oninput', limit  = 3; //满足自动切换焦点的字符数
for(var i=0;i<input.length-1;i++){input[i].index=i;input[i][type]=function () {iNow=this.index;var that=this;setTimeout(function () {that.value.length>limit-1&&input[iNow+1].focus();},0)}
}//然后在最后一个框的时候添加回车触发提交表单事件：
$("input").keydown(function(event){if (event.keyCode == 13) {document.getElementById("form").submit();}
});

目前只尝试过这种方式，要是有更简洁的方法欢迎留言贴码~

input输入框点击回车切换到下一个输入框功能相关推荐

按enter键，快速切换到下一个输入框进行输入
这边用的是ant + vue 效果:按enter键的时候,下一个输入框高亮,并且选中里面的值外层是一个数组,这边就不贴出来了 <a-input-number:ref="'input' ...
vue表格回车切换到下一个input或select(回车代替tab功能)
简化版,后续有时间在完善,先提供一个思路. 如图一.使用回车触发table中每一列input框代码如下 <!DOCTYPE html> <html lang="en&qu ...
android按下enter键如何让光标跳到下一个edittext,Android：EditText回车跳到下一个输入框或登录...
创建一个工具类ViewUtil 在工具类中创建文本检查者 public static class JumpTextWatcher implements TextWatcher { private Ed ...
小程序输入框完成切换到下个输入框
小程序输入框完成切换到下个输入框需求:页面有多个输入框,一个输完点击回车,切换到下个输入框思路:利用小程序输入框的focus(获取焦点)属性,在bindconfirm事件(点击完成后触发)里设置变 ...
按回车键光标自动移动到下一个输入框。
在html页面中有多个input 输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框. 1.原生Js实现: <!DOCTYPE html> <htm ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
angular下拉框点击无反应_angular 实现下拉菜单的点击其他区域关闭下拉菜单功能？...
代码如图, 点击 div.selected 的时候 ul.dorpdown-list 就会显示点击 li 的时候 ul收起并且赋值给selectedVal 现在还有个需求是点击dorpDown ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
java输入值按回车下一个_java 如何按回车光标换到下个输入框
按回车属于文本框提交事件,监听后聚焦到下一个输入框,就完成了切换最大字符数后切换,即监听Text长度在聚焦切换特别写了个回车互相切换的applet例子, import java.awt.event ...

input输入框点击回车切换到下一个输入框功能

input输入框点击回车切换到下一个输入框功能相关推荐

最新文章

热门文章