JS实现在一个输入框按回车键后光标跳到下一个输入框

最新推荐文章于 2024-05-28 15:47:14 发布
最新推荐文章于 2024-05-28 15:47:14 发布
阅读量9.6k 收藏 10
点赞数 2 
<body>
      <el-input class="codeInput1 codeInput" autofocus  maxlength="4"  oninput=" focusNextInput(this);" >
      <el-input class="codeInput2 codeInput" maxlength="4"  oninput="focusNextInput(this);">
      <el-input class="codeInput3 codeInput" maxlength="4" oninput="focusNextInput(this);">
</body>
<script type="text/javascript">

function focusNextInput(thisInput)
{
   if(thisInput.value.length==4){
      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;
         }
       }
    }
}

</script>

 

生如夏花❀❀
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
javascript 回车键后跳到下一控件
10-30
按回车键后跳到下一控件的js代码
enter键控制input光标移动到下一个框
10-24
enter键控制input光标移动，通过判断是否是最后一个input输入框来决定是继续向下跳还是跳到第一个input输入框
vue，js，按下enter触发tab，按下回车模拟触发tab，vue回车切换到下一个input或select(回车代替tab功能)，回车自动下一行功能
最新发布
qq_22828225的博客
05-28 812
【代码】vue，js，按下enter触发tab，按下回车模拟触发tab，vue回车切换到下一个input或select(回车代替tab功能)，回车自动下一行功能。
关于angularjs框架中input按回车事件光标跳转到另一个input上
akemt的专栏
05-13 5839
我们项目里用到angularjs 对应的包，没有ng-keypress\ng-keydown。 所以，我们自己写一些指令。 首先在，项目模块对应的module.js中写指令 define([ ‘angular’, ‘angular-couch-potato’, ‘angular-ui-router’, ‘angular-resource’ ], functio
按回车键，焦点转到下一个
蒲厷渶と戀的博客
06-09 2768
代码写的过程中，会遇到一种需求，敲击回车，焦点转到下个输入框，简单总结一下，代码如下： html代码： css代码： 实现方式两种，第一种：原生js；第二种：jquery 第一种：js代码： 第二种方式：jquery代码
用javascript语言编写一个小程序：在一个文本框（用户名框）中按回车键时，跳转到另一个文本框（密码框）中，密码框回车之后，打一个登陆成功。点击button也是登陆成功。
sunshine_hl的博客
08-13 1505
用javascript语言编写一个小程序：在一个文本框（用户名框）中按回车键时，跳转到另一个文本框（密码框）中，密码框回车之后，打一个登陆成功。点击button也是登陆成功。
javascript实现按回车键切换焦点
10-24
主要介绍了javascript实现按回车键切换焦点的方法,需要的朋友可以参考下
JavaScript实现一个输入框输完回车跳到下一个输入框
小小渔夫
12-23 5292
需求 实现扫描枪扫描条码，输入框接收完数据后，自动跳转到下一个输入框 思路 方法一、获取输入框长度，大于一定长度跳转 方法二、扫描枪扫描完自动发送回车键，判断按键事件是否为13，是跳转到下一个输入框 方法三、form表单中点击tab实现 实现 方法一 <body> <el-input class="a" autofocus maxlengt...
js按下回车键调用方法
qq_37800258的博客
02-23 3377
js按下回车键调用方法 下面有两种方法，要注意键盘上有两个“Enter”键，方法1对于数字区域的“Enter”键无效。 1、方法一： // mounted或created中都可 mounted: function () { // 页面加载自动获取焦点 let inputRoomId = document.getElementById("roomId"); inputRoomId.focus(); var _that=this; document.onkeydo
JavaScript--简单实现按回车键，光标跳转到后一文本框中和表单提交
博客
08-20 3299
功能： 1、按回车键，光标跳转到下一文本框中 2、验证表单，若用户名或密码为空，后面出现提示信息 span { color: transparent; } 用户名： 邮箱： 职业： 注册 function usernameValidate(this
通过上下左右键和回车键切换光标实现代码
09-05
最后，虽然示例代码没有显示，但实现回车键功能通常会在`keydown`事件处理函数中增加一个`case 13:`（回车键的键盘码）的分支，用于将焦点转移到下一个文本框。 综上所述，这个功能的实现涉及到了HTML、CSS、...
按下Enter焦点移至下一个控件的实现js代码
10-26
正如标题所言使用js操作按下Enter焦点移至下一个控件，具体的实现示例如下，需要的朋友可以参考下
vue实现输入框自动跳转功能
10-15
在Vue.js框架中，实现输入框自动跳转功能主要用于提高用户体验，使得用户在输入特定内容时，能够自动在多个输入框之间切换，无需手动点击或使用方向键。本实例主要展示了如何利用Vue的模板语法、事件监听器以及数据...
C#实现回车光标自动跳到下一个控件的几种方法
05-31
当用户在文本框（TextBox）中按下回车键时，通常希望光标能够自动移动到下一个控件，以便连续输入或执行某些操作。本篇文章将深入探讨如何在C#中实现这种功能，主要涉及以下知识点： 1. **事件处理**：在C#中，事件...
JS实现回车键切换到下一个输入框
热门推荐
DJun的博客
09-05 1万+
进入正题之前，首先说明一下这里的情况。 因为我的input输入框全部都是使用JS代码动态生成的，也就是说我在页面里面点击一次按钮就会生成几个输入框。所以我使用了JQuery的$("#id").on("keydown","input",function()特性来实现捕捉总输入框的个数与按一次回车指向下一个输入框，直到最后一个输入框。 在这里是使用JQuery实现的，代码如下： //para_...
按回车键光标自动移动到下一个输入框。
weixin_42165130的博客
12-04 2856
在html页面中有多个input输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。 1.原生Js实现： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"&g...
使用JavaScript控制文本输入框在按下回车时进行数据提交！
面向对象
10-14 616
假设有一个文本输入框，也可以是一个表单： 如： &lt;input id="searchProductText" name="textfield" type="text" class="font-hui14" value="请在此输入商品名" size="28" onkeypress="if(event.keyCode==13
javascript 判断输入框是否输入回车键（两种实现方法）
m0_71765265的博客
02-17 3210
javascript 判断输入框是否输入回车键（两种实现方法）
uniapp实现在一个输入框按回车键后光标跳到下一个输入框
06-02
您可以在 `input` 标签中监听 `keydown` 事件，当用户按下回车键时，通过 `nextTick` 方法将光标聚焦到下一个输入框中。 以下是一个简单的示例代码： ```html <template> <div> <input ref="input1" type="text" @keydown.enter="nextInput"> <input ref="input2" type="text"> </div> </template> <script> export default { methods: { nextInput() { this.$nextTick(() => { this.$refs.input2.focus() }) } } } </script> ``` 在上面的示例中，当用户在第一个输入框中按下回车键时，`nextInput` 方法会被调用，该方法通过 `$nextTick` 方法将光标聚焦到第二个输入框中。 请注意，上述示例仅适用于两个输入框的情况。如果您需要处理多个输入框的情况，可以考虑将 `nextInput` 方法改为可配置的，以便于在不同的输入框中使用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值