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

news/2025/2/22 4:22:21/

直接上代码:

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

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

 


http://www.ppmy.cn/news/787271.html

相关文章

android edittext自定义键盘,如何在android中单击edittext时显示自定义键盘

我使用Keyboard标签在我的应用程序中创建了自定义键盘.我在屏幕上的RelativeLayout中添加了这个键盘. private void createCustomKeyboard() { Keyboard customKeyboard new Keyboard(getActivity(), R.layout.keyboard); CustomKeyboard mCustomKeyboard new CustomKeyboard…

关于手机端IOS系统微信中虚拟键盘遮挡input输入框问题的解决方案

手机端IOS系统微信中虚拟键盘遮挡input输入框问题解决方案 最近在工作中遇到了一个关于手机端IOS系统的第三方软键盘唤起导致底部输入框被遮挡的问题&#xff0c;具体情况是要求实现一个手机端在线聊天页面&#xff0c;需要仿微信的聊天页面&#xff0c;一开始整个页面的布局是…

利用python自动接发微信客户端消息(文件、图片等)

前期准备 1. 环境 python 3.7, win10 64位操作系统 2. 依赖包下载 pip install wxauto 4. 登陆微信PC客户端 接发消息 # wxauto 的代码太长&#xff0c;在 https://github.com/cluic/wxauto 获取 from wxauto import WeChat# 获取当前微信客户端 wx WeChat()# 获取会话列…

微信小程序 自定义控件 数字键盘

叹&#xff01; 2020 7 28~ 晴 31℃ 2020年~活着就是一种幸福~ 人生磕磕绊绊20&#xff0c;前途一片迷茫&#xff01;年纪大了学习感觉有心无力&#xff01;随着“鼠年”疫情影响&#xff0c;公司动荡不安&#xff0c;个人动力也仿佛被掏空...... 正题&#xff01;个人外包…

微信小程序自定义键盘|仿微信支付数字键盘

实现效果 简介 点击金额模块区域&#xff0c;获取焦点。点击非金额模块区域&#xff0c;失去焦点且隐藏支付键盘。支持小数点两位数字。付款金额默认置灰&#xff0c;点击付款按钮无效。当输入付款金额后&#xff0c;付款按钮还原正常状态。删除按钮可以通过icon图标或者图片来…

iOS Dev (61) 文本输入框随键盘上移,类似信息、Whatsapp、微信中的聊天输入框

iOS Dev (61) 文本输入框随键盘上移&#xff0c;类似信息、Whatsapp、微信中的聊天输入框 作者&#xff1a;阿锐 地址&#xff1a;http://blog.csdn.net/prevention - 在 UITextView 所在的类的 interface 声明中添加 UITextViewDelegate 代理&#xff0c;在 implementation…

微信小程序输入框键盘显示时,上推固定在底部的按钮

记录一下在学习中遇到的问题&#xff0c;如果错误还请指正&#xff01;&#xff01;&#xff01; 当按钮固定在了底部&#xff0c;点击输入框时&#xff0c;键盘就把底部的按钮覆盖掉。有的时候想让它被键盘上推&#xff0c;就需要这样来实现了。 //JS代码 data: {bottom: 0,…

Android EditText 设置键盘右下角显示发送,并且可以输入多行

Android EditText 设置键盘右下角显示发送&#xff0c;并且可以输入多行 今天一哥们在群里问了这么一个问题&#xff0c;试着实现了一下&#xff0c;在此记录一下&#xff1a; 首先既然想在EditText 获取焦点以后&#xff0c;键盘右下角显示完成&#xff0c;那就在需在xml文件…