Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to simulate TAB on ENTER keypress in javascript or jQuery

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?

thanks


EDIT 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.

thanks

like image 436
Arian Avatar asked Dec 17 '11 16:12

Arian


People also ask

Can JavaScript simulate key presses?

If you need keyup events too, it is also possible to simulate keyup events by changing "keydown" to "keyup" in the code snippet. This also sends the event to the entire webpage, hence the document . If you want only a specific element to receive the event, you can substitute document for the desired element.

How do you trigger a function when enter key is pressed in JavaScript?

To trigger a click button on ENTER key, We can use any of the keyup(), keydown() and keypress() events of jQuery. keyup(): This event occurs when a keyboard key is released. The method either triggers the keyup event, or to run a function when a keyup event occurs.

How do you check if Enter key is pressed in jQuery?

To check if an “enter” key is pressed inside a textbox, just bind the keypress() to the textbox. $('#textbox').


2 Answers

$('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/

like image 42
dku.rajkumar Avatar answered Oct 01 '22 21:10

dku.rajkumar


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();
                }
            }
        }
    });
});
like image 126
Abdul Munim Avatar answered Oct 01 '22 22:10

Abdul Munim