How to focus Button in java-script

Question

Simply I have this HTML document

<input type="text" id="my_txt" onkeypress="move_focus(event)"/>
<br>
<input type="button" id="my_btn" />
<script >
function move_focus(e)
{
    if (e.keyCode==13) $("#my_btn").focus();
}
</script>

What I want is: on key press event of input-text my_txt, if the pressed key is ENTER key move the focus to my_btn button.

I did it like above BUT that doesn't work and no any action is done when Enter key pressed.

I found more than one post in this network about this topic but most answers are complex and some me away of what I need.

Help Please!.. Thanks in advance.

Possible duplicate of [Enter key press event in JavaScript](http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript) — Siguza, Sep 24 '16 at 11:10

score 3 · Answer 1 · answered Sep 24 '16 at 11:08

3

Keynumber 13 is an key which is used by default to accepts things (https://api.jquery.com/event.preventdefault/), so basicly you have to override it with this:

e.preventDefault();

Whole Code

<input type="text" id="my_txt" onkeypress="move_focus(event)"/>
<br>
<input type="button" id="my_btn" />
<script >
function move_focus(e)
{
  e.preventDefault();
  if (e.keyCode==13) $("#my_btn").focus();
}
</script>

answered Sep 24 '16 at 11:08

Tim Jansen

73
10

thank you for your effort, But that doesn't move the focus to button !.. – Saddam Meshaal Sep 24 '16 at 11:51

score 1 · Accepted Answer · edited May 23 '17 at 11:53

The important part for this is use of bind. Bind creates a new function that will have this (this) set to the first parameter passed to bind(). So when we write $('#my_txt').bind("enterKey"), it actually maps #my_txt and event enterKey in same context that the function will execute in. So every time we press a key inside input element with id #mytxt, when we release the key it will check if the key pressed is Enter Key or not which is provided by the line $('#my_txt').keyup(e) which takes the event object as parameter. Here the event will be keypress event.

move_focus = function move_focus(e) {
  $('#my_txt').bind("enterKey",function(e){  
    $("#my_btn").focus();
     //disable to prevent multiple enter
     $(this).attr("disabled", "disabled")
  });
  $('#my_txt').keyup(function(e){
     if(e.keyCode == 13)        //checks if the event object is a Enter Key or not
     {
      $(this).trigger("enterKey");   //explicitly triggers enterkey event with whom #my_txt is bound to
     }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_txt" onkeypress="move_focus(event)"/>
<br/>
<input type="button" id="my_btn" value="button" />

Thank you so much that works fine, But can you explain the code of function line by line (if and only if your time allow that) thank you again. — Saddam Meshaal, Sep 24 '16 at 12:07
I'll write the comments on the code so that it will be useful for others searching later too. — Cyclotron3x3, Sep 24 '16 at 12:25

score 0 · Answer 3 · answered Sep 24 '16 at 11:23

Try this example which uses jQuery:

$( "#my_txt" ).keypress(function(event) {
 var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
     $( "#my_btn" ).focus();
    }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body> 
  <input type="text" id="my_txt"/><br>
  <input type="button" id="my_btn" value="Button" />
</body>

score -2 · Answer 4 · edited Sep 24 '16 at 17:59

-2

Instead of using:

$("#my_btn").focus();

Please use:

document.getElementById("my_btn").focus();

edited Sep 24 '16 at 17:59

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Sep 24 '16 at 11:37

garima

21
3

How to focus Button in java-script

4 Answers4