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
    评论
按回车键光标自动移动到下一个输入框。
weixin_42165130的博客
12-04 2843
在html页面中有多个input输入框,如何通过原生js或者jquery怎么实现:按回车键光标自动移动到下一个输入框。 1.原生Js实现： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"&g...
JavaScript--简单实现按回车键，光标跳转到后一文本框中和表单提交
博客
08-20 3290
功能： 1、按回车键，光标跳转到下一文本框中 2、验证表单，若用户名或密码为空，后面出现提示信息 span { color: transparent; } 用户名： 邮箱： 职业： 注册 function usernameValidate(this
javascript 自动跳到下一输入区域
月影的专栏
04-24 877
按下Enter时，光标自动跳到下一个文本框document.onkeydown = function(){ if(event.keyCode == 13) {  event.keyCode = 9; }}  或者function T1_onkeyup() {  if(document.card.T1.value.length==4){     documen
vue，js，按下enter触发tab，按下回车模拟触发tab，vue回车切换到下一个input或select(回车代替tab功能)，回车自动下一行功能
最新发布
qq_22828225的博客
05-28 513
【代码】vue，js，按下enter触发tab，按下回车模拟触发tab，vue回车切换到下一个input或select(回车代替tab功能)，回车自动下一行功能。
javascript实现按回车键切换焦点
10-24
主要介绍了javascript实现按回车键切换焦点的方法,需要的朋友可以参考下
JavaScript实现一个输入框输完回车跳到下一个输入框
小小渔夫
12-23 5267
需求 实现扫描枪扫描条码，输入框接收完数据后，自动跳转到下一个输入框 思路 方法一、获取输入框长度，大于一定长度跳转 方法二、扫描枪扫描完自动发送回车键，判断按键事件是否为13，是跳转到下一个输入框 方法三、form表单中点击tab实现 实现 方法一 <body> <el-input class="a" autofocus maxlengt...
js按下回车键调用方法
qq_37800258的博客
02-23 3366
js按下回车键调用方法 下面有两种方法，要注意键盘上有两个“Enter”键，方法1对于数字区域的“Enter”键无效。 1、方法一： // mounted或created中都可 mounted: function () { // 页面加载自动获取焦点 let inputRoomId = document.getElementById("roomId"); inputRoomId.focus(); var _that=this; document.onkeydo
使用JavaScript控制文本输入框在按下回车时进行数据提交！
面向对象
10-14 615
假设有一个文本输入框，也可以是一个表单： 如： &lt;input id="searchProductText" name="textfield" type="text" class="font-hui14" value="请在此输入商品名" size="28" onkeypress="if(event.keyCode==13
enter键控制input光标移动到下一个框
10-24
在这个例子中，我们有三个连续的输入框，用户通常会期望在填写完一个后，按下"Enter"键就能跳转到下一个。为了实现这个功能，我们可以使用JavaScript，尤其是jQuery库，因为jQuery提供了方便的事件处理和DOM操作。 ...
通过上下左右键和回车键切换光标实现代码
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#中，事件...
javascript 判断输入框是否输入回车键（两种实现方法）
m0_71765265的博客
02-17 3177
javascript 判断输入框是否输入回车键（两种实现方法）
js 光标从一个框输入完之后自动跳到另一个框
weixin_41639609的博客
04-06 984
只靠id完成（死方法），多个框要写多遍 <html>     <head>       <title>js24.html</title>              <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     &nb
JS判断input按了回车键
weixin_30732487的博客
06-02 800
参考代码如下： <input type="textbox" id="textbox1" onkeypress="CheckInfo" /> function CheckInfo() { if (event.keyCode == 13) { alert(textbox1.text); } } 转载于:https://...
HTML+JS 实现 input 框回车事件
热门推荐
m0_55080712的博客
09-09 1万+
很多时候input框我们输入结束后都习惯直接按回车，而不是点击button。在form表单中可以实现点击回车即可提交表单，但如果只是一个单独的input框，则无法通过直接按回车来提交内容。这种情况我们可以使用JavaScript脚本实现input框回车事件，其实现方法很简单，这里用到了jQuery框架，代码如下：只需要在script标签中直接加入以下内容即可。keycode==13即代表按下了回车键，同理可以通过更改此代码实现其他按键的触发事件。
JavaScript回车事件
qq_60504665的博客
11-16 4284
在代码中，我们同样使用addEventListener()方法添加了一个键盘事件监听器，并在按下回车键时触发sendMessage()函数来发送消息。需要注意的是，在发送消息后，我们还需要将输入框中的文本清空，以便用户可以方便地输入下一条消息。因此，在监听器中需要通过判断keyCode属性的值来确定是否按下的是回车键，从而执行相应的操作。在监听器中，我们还需要获取到用户输入的关键字，并通过关键字来进行相应的搜索操作。这时候需要监听文本框的回车事件，并在按下回车键后触发发送消息的操作。
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、付费专栏及课程。

余额充值