按enter键切换文本字段

Switch text field on enter press

本文关键字：文本 字段 enter      更新时间：2023-09-26

我在网上找到的答案都不起作用。

当我的页面加载时，我让我的JS文件选择第一个文本字段；这是有效的。然后我想要它，这样如果在文本字段中按下回车键，它就会进入下一个文本字段。现在我有。。。

$('input[type="text"]').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
});

这不起作用。

我的投入是。。。

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />

如果我做了什么蠢事，我很抱歉，但我想弄清楚这件事已经太久了。

您只需要将代码片段指向文档就绪函数。像下面的

$(document).ready(function (){
     $('input[type="text"]').keyup(function(e) {
          var key_code = e.keyCode || e.which;
          if(key_code == 13)
          {
              $(this).nextAll('input[type="text"]').first().focus();
          }
     });
 });

有意识地建议，如果在第二个文本输入字段之前有任何其他DOM，则使用nextAll('input[type="text"]').first().focus()。

您应该检查是否存在脚本错误。在Chrome上，按Ctrl+Shift+J.

只需在第一个输入字段中添加自动聚焦HTML属性。

您的密码应为输入型密码。

<input type="text" name="username" id="username" autocomplete="off" autofocus />
<input type="password" name="password" id="password" autocomplete="off" />

您的代码运行良好，确保浏览器控制台中出现任何错误。

$(document).ready(function(){
 $('input[type="text"]').keyup(function(e) {
  if(e.keyCode == 13) {
   $(this).next().focus();
  }
 });
});

这里是html

<input type="text" name="username" id="username" autocomplete="off" data-selected="true" />
<input type="text" name="password" id="password" autocomplete="off" data-selected="false" />

这是JS

$('input[type="text"]').keyup(function (e) {
    if (e.keyCode == 13) {
    $('[data-selected=false]').focus();
    $('[data-selected=false]').attr('data-selected', true);
    $(this).attr('data-selected', false);
    }
});

这是小提琴

https://jsfiddle.net/tm8yxL1m/

解释：

我使用dataselected="true"来检查字段是否被选中。当用户按下回车键时。我将其操作为false，并使其他为true

请尝试以下操作：

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />

$('input[type="text"]').keypress(function(e) {
  if(e.which == 13) {
     $(this).next().focus();
  }
});

将input选择器与jQuery一起使用以下代码将适用于input type="text"、input type="password"以及<select>标记。。

请参阅在线JS Fiddle。HTML:

<input type="text" name="username" id="username" autocomplete="off" />
<input type="password" name="password" id="password" autocomplete="off" />
<select style="width:100px">
<option>A</option>
<option>b</option>
<input type="text" name="text2" id="text2" autocomplete="off" />
</select>
</select>

JS:

$(document).ready(function(){
  $('input:first , select').keyup(function(e) {
    if(e.keyCode == 13) {
        $(this).next().focus();
    }
  });
});

<input type="text" name="username" id="username" autocomplete="off" />
<input type="text" name="password" id="password" autocomplete="off" />

1.首先将e.keyCode更改为e.which

$(document).ready(function(){
    $('input[type="text"]').keypress(function(e) {
      if(e.which == 13) {
         $(this).next().focus();
      }
    }); 
});
  1. 检查你的html中是否有jquery
  2. 您提供的html可能是附在带有提交按钮的表格中。如果是这样的话，即使您已经提供了keyup活动，您的表格也会提交。这就是为什么你没有看到结果
  3. 密码应为type = password。只是个建议在您的查询之外
相关文章：