如何在javascript或jQuery中模拟TAB键输入

I want to change keycode in keydown ( key press ) in all input in a page.I want to replace Enter keycode with TAB key code. How I can do this?

我想在一个页面的所有输入中更改keydown(按下键)中的keycode。我想用TAB键代码替换输入键码。我该怎么做?

thanks

谢谢

---

EDIT 1)

编辑(1)

Consider this code:

考虑这段代码:

<div>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
    </asp:RadioButtonList>
    <br />
    <br />
    <asp:TextBox ID="TextBox1" runat="server">3333</asp:TextBox>
    <br />
    <br />
    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
    </asp:DropDownList>
</div>

I want when user press Enter on eny of above control focus go to next control.

我想当用户按下以上控制焦点的eny时去下一个控制。

thanks

谢谢

8 个解决方案

#1

I've had a similar problem, where I wanted to press + on the numpad to tab to the next field. Now I've released a library that I think will help you.

我也遇到过类似的问题，我想要在numpad上按+键到下一个字段。现在我发布了一个我认为会对你有帮助的库。

PlusAsTab: A jQuery plugin to use the numpad plus key as a tab key equivalent.

PlusAsTab:一个jQuery插件，使用numpad plus键作为标签键的等价。

Since you want enter/↵ instead, you can set the options. Find out which key you want to use with the jQuery event.which demo.

因为你想要输入/↵相反,您可以设置选项。找出您希望在jQuery事件中使用的键。演示。

JoelPurra.PlusAsTab.setOptions({
  // Use enter instead of plus
  // Number 13 found through demo at
  // https://api.jquery.com/event.which/
  key: 13
});

Then enable the feature by adding plus-as-tab="true" to the form fields you want to use enter-as-tab in, or some other element that contains these form fields. Radio buttons should not be a problem, as they are covered by my other library, EmulateTab - see autonavigation of radio buttons in that demo.

然后通过将plus-as-tab=“true”添加到想要使用enter-as-tab的表单字段中，或其他包含这些表单字段的元素来启用该特性。单选按钮不应该是一个问题，因为它们被我的另一个库EmulateTab所覆盖——请参阅演示中的单选按钮的自动导航。

<div plus-as-tab="true">
  <!-- all focusable elements inside the <div> will be enabled -->
  <asp:RadioButtonList ID="RadioButtonList1" runat="server">
    <!-- Radio buttons should not be a problem. -->
  </asp:RadioButtonList>
</div>

You can try it out yourself in the PlusAsTab enter as tab demo.

您可以自己在PlusAsTab enter作为tab demo进行测试。

#2

This code is to replace enter with tab character:

此代码是用制表符替换输入:

$("#wmd-input").bind("keypress", function(e) {
   if (e.keyCode == 13) {
      var input = $(this);
      var inputVal = input.val();
      setTimeout(function() {
        input.val(inputVal.substring(0,inputVal.length) + "\t");
      }, 1);
   }
});

Live Demo

现场演示

UPDATE:

更新:

This code is to focus to on the next element:

此代码将关注下一个元素:

$(document).ready(function () {
    $("input,select").bind("keydown", function (e) {
        if (e.keyCode == 13) {
            var allInputs = $("input,select");
            for (var i = 0; i < allInputs.length; i++) {
                if (allInputs[i] == this) {
                    while ((allInputs[i]).name == (allInputs[i + 1]).name) {
                        i++;
                    }

                    if ((i + 1) < allInputs.length) $(allInputs[i + 1]).focus();
                }
            }
        }
    });
});

#3

Hope this works

希望这个工作

$('input,textarea').keydown(function(){
  if(event.keyCode==13) {
    event.keyCode = 9;
  }
});

Edit

编辑

Try this http://jsfiddle.net/GUmUg/. Play around with selectors to make this work as i don't know asp

试试http://jsfiddle.net/GUmUg/。和选择器一起玩，使这个工作，因为我不知道asp

$('input,textarea').keypress(function(e){
    if(e.keyCode==13) {
   $(this).next().focus();
  }
});

#4

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

check fiddle here : http://jsfiddle.net/Pd5QC/

检查小提琴:http://jsfiddle.net/Pd5QC/

#5

The way I do it is by using jquery to each over your selection and focusing on the element after the current on you are on.

我这样做的方法是在您的选择上使用jquery，并在当前状态之后关注元素。

$(document).on('keyup', '.my-input', function (ev) {

    if (ev.keyCode == '13') {
        var currentInput = this;
        var isOnCurrent = false;

        $('.my-input').each(function () {

            if (isOnCurrent == true) {
                $(this).focus();
                return false;
            }

            if (this == currentInput) {
                isOnCurrent = true;
            }

        });
    }
});

#6

I created a simple jQuery plugin which does solve this problem. It uses the ':tabbable' selector of jQuery UI to find the next 'tabbable' element and selects it.

我创建了一个简单的jQuery插件来解决这个问题。它使用jQuery UI的“:可制表”选择器查找下一个“可制表”元素并选择它。

Example usage:

使用示例:

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

#7

I think this work:

我认为这项工作:

 $('input').live("keypress", function (e) {
        /* ENTER PRESSED*/
        var OffSet = 0;
        if (e.keyCode == 13) {
            /* FOCUS ELEMENT */
            if ($(this).is("input[type='radio']")) {
                var tblID = $(this).closest('table').attr('id');
                var radios = $('#' + tblID).find(":input");
                //alert(radios.index(this));
                OffSet = radios.length - radios.index(this) - 1;
            }
            //alert(OffSet);

            var inputs = $(this).parents("form").eq(0).find(":input");
            var idx = inputs.index(this);
            inputs[idx + OffSet].blur();

            try {
                inputs[idx + OffSet].selectionStart = inputs[idx + OffSet].selectionEnd = -1;
            } catch (e) {

            }
            if (idx == inputs.length - 1) {
                inputs[0].select();
            } else {
                inputs[idx + 1 + OffSet].focus(); //  handles submit buttons
                try {
                    inputs[idx + 1 + OffSet].select();
                } catch (e) {
                }
            }
            return false;
        }
    });

#8

$(document).ready(function() {

//Objetos con CssClass="EntTab" sustituye el Enter (keycode 13) por un Tabulador (keycode 9)!!

    $(".EntTab").bind("keypress", function(e) {
        if (e.keyCode == 13) {
            var inps = $("input, select"); //add select too
            for (var x = 0; x < inps.length; x++) {
                if (inps[x] == this) {
                    while ((inps[x]).name == (inps[x + 1]).name) {
                        x++;
                    }
                    if ((x + 1) < inps.length) $(inps[x + 1]).focus();
                }
            } e.preventDefault();
        }
    });
});