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

Siguza
– Siguza

2016-09-24 11:10:35 +00:00
Commented Sep 24, 2016 at 11:10 — Siguza
– Siguza, Commented Sep 24, 2016 at 11:10

Tim Jansen · Accepted Answer · 2016-09-24 11:08:18Z

4

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, 2016 at 11:08

Tim Jansen

8310 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saddam Meshaal Over a year ago

thank you for your effort, But that doesn't move the focus to button !..

Community · Accepted Answer · 2017-05-23 11:53:29Z

1

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" />

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Sep 24, 2016 at 11:13

Cyclotron3x3

2,2491 gold badge29 silver badges41 bronze badges

2 Comments

Saddam Meshaal Over a year ago

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.

Cyclotron3x3 Over a year ago

I'll write the comments on the code so that it will be useful for others searching later too.

Prifulnath · Accepted Answer · 2016-09-24 11:23:46Z

0

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>

answered Sep 24, 2016 at 11:23

Prifulnath

61913 silver badges38 bronze badges

Comments

Brian Tompsett - 汤莱恩 · Accepted Answer · 2016-09-24 17:59:15Z

-2

Instead of using:

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

Please use:

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

edited Sep 24, 2016 at 17:59

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Sep 24, 2016 at 11:37

garima

213 bronze badges

Collectives™ on Stack Overflow

How to focus Button in java-script

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related