使用jQuery模拟按下tab键

Question

我在一个.net页面上有一些文本框，并希望使用jQuery实现以下功能：如果用户按下回车键，程序应该表现得好像他使用了标签键，从而选择下一个元素。我尝试了以下代码（以及更多）：

<script type="text/javascript">

jQuery(document).ready(function () {

    $('.tb').keypress(function (e) {
        if (e.keyCode == 13)
        {
            $(this).trigger("keydown", [9]);
            alert("return pressed");
        } 
    });
});

<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox>

但它根本不起作用！是缺少了什么，还是犯了错误？

这里是我使用的一些链接：

这里

以及这里

- AGuyCalledGerald

---

不，因为你没有将事件传递给函数。你需要使用：$('.tb').keypress(function(e){ 然后函数就可以访问事件和 event.keyCode，虽然我认为 e.which 是标准化的 jQuery 版本（可能需要，也可能不需要）。 - David Thomas

你能澄清一下“不起作用”的意思吗？会发生什么？有JS错误吗？ - Christofer Eliasson

@ChristoferEliasson：什么都没有发生。 - AGuyCalledGerald

可能是[模拟TAB键按下：将焦点集中在由'tabIndex'确定的下一个元素上]的重复问题(https://dev59.com/Gmw05IYBdhLWcg3wVgam)。 - Andrew Myers

Answer 1

试试这个：

http://jsbin.com/ofexat

$('.tg').bind('keypress', function(event) {
  if(event.which === 13) {
    $(this).next().focus();
  }
});

或者循环版本：http://jsbin.com/ofexat/2

- czerasz

---

谢谢，但是这只有在找到下一个兄弟元素时才有效，否则我理解错了吗？但无论如何它应该都能起作用。 - AGuyCalledGerald

你想要循环这些元素吗？ - czerasz

如果元素是这样的将不起作用。<input class="input"><br><input class="input"><button> 在第一个输入框中按下“Enter”键无法找到下一个输入框，但可以找到 br 标签。使用 next('.input') 仍然不起作用。 - vee

Answer 2

我创建了一个简单的jQuery插件（jQuery.tabbable），可以解决这个问题。它使用jQuery UI的':tabbable'选择器来查找下一个可用的元素并进行选择。

示例用法:

// Simulate tab key when enter is pressed           
$('.tb').bind('keypress', function(event){
    if(event.which === 13){
        if(event.shiftKey){
            $.tabPrev();
        }
        else{
            $.tabNext();
        }
        return false;
    }
});

- Mark Lagendijk

---

谢谢，我没有使用整个插件，但是使用:tabbable选择器是一个不错的点子。 : P - prdatur

请注意，:tabbable 需要 jQuery UI 依赖。 - Alex from Jitbit

我喜欢它！对于我的用例，我修改了JavaScript代码，在每个函数的末尾添加了selectables.eq(prevIndex).select();以模拟Tab键选择下一个输入框内容的方式。 - Dave Smash

Answer 3

我从多个答案中得出了最适合我的完美解决方案，其中按下“Enter”键会像“Tab”键一样在输入框之间切换焦点，并且选择后会将焦点移动到下一个输入框、选择框或文本区域，同时允许在文本区域内使用“Enter”键。

 $("input,select").bind("keydown", function (e) {
     var keyCode = e.keyCode || e.which;
     if(keyCode === 13) {
         e.preventDefault();
         $('input, select, textarea')
         [$('input,select,textarea').index(this)+1].focus();
     }
 });

- Shehbaz

---

这对我的项目几乎是完美的，但我需要它不要切换到每个单选按钮。使用循环跳过具有相同名称的输入即可解决问题。 var nextInput = $('input,select,textarea')[$('input,select,textarea').index(this)+1]; while ($(this).attr('name') === $(nextInput).attr('name')) { nextInput = $('input,select,textarea')[$('input,select,textarea').index(nextInput)+1]; } 它仍然会停留在隐藏输入框中。通常它们可以位于表单顶部，但我有一个条件隐藏的输入框，必须重新出现在正确的位置。 - malcanso

如果 (keyCode === 13) { 是更好的 - Artur A

Answer 4

尝试这个。

$(this).trigger({
    type: 'keypress',
    which: 9
});

- Shai Mishali

---

谢谢，但它仍然没有反应。 - AGuyCalledGerald

检查JS控制台是否有错误，尝试在干净的HTML文件中单独运行代码，看看能否产生所需的特定情况。然后尝试将其移动到您的主文件中。 - Shai Mishali

你能提供一个好的 JSFiddle 吗？因为我尝试过了，但它没有起作用。请参见这里。 - Saeed Neamati

我也无法使用 - Code Pen。 - Adam Zerner

@SaeedNeamati 我已经更新了这个fiddle。`$(function() { $('#first').focus(); $('button').click(function() { $('#first').trigger({ type: 'keypress', which: 9 }); });$('#first').on('keypress', function(e) { if (e.which == 9) { alert("Tab键被按下！"); $(this).next().focus(); } });});` - stackuser