300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > input输入框点击回车切换到下一个输入框功能

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

时间:2022-03-14 17:19:25

相关推荐

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();}});

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。