jQuery - Place cursor in input field when link clicked

Question

I would like to place the cursor in an input field after a specific link is clicked. I'm using this for a small search engine.

Imagine an input field: []. Then some links which is adding a string like: Denmark, England etc. to the input field.

Now I need the cursor to be placed like this: "Denmark, [here]".

Is this possible?

* UPDATE *

I'm using this code right now to replace the text, how would you add the "position cursor"-trick with this?

$('#denmark').click(function(){     
   $('#searchBoxBig').val('Denmark, ');
});

Replace the text.. I've updated the question with the text I use right now — skolind
– skolind, Commented Oct 30, 2011 at 9:28
If you also want to move the caret at the visible part of the browser, have a look at this answer: stackoverflow.com/questions/7892902/… — Rob W
– Rob W, Commented Oct 30, 2011 at 9:42

472084 · Accepted Answer · 2018-04-02 15:08:36Z

54

yes, catch the click event on the anchor prevent the default action and focus on the field.

the function context contains the element that has been clicked so u can compute which field to apply the focus call on.

$(anchorSelector).live("click", function(e) {
   e.preventDefault(); 

   $(fieldSelector).focus();

   return false;
});

edited Apr 2, 2018 at 15:08

472084

17.9k10 gold badges67 silver badges82 bronze badges

answered Oct 30, 2011 at 9:16

Nicolas Modrzyk

14.2k2 gold badges39 silver badges40 bronze badges

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

4 Comments

skolind Over a year ago

I've updated the question, how would you add the trick to my current code, to replace the text?

klewis Over a year ago

This is the way to go!

John Max Over a year ago

Practically and with a new update from Jquery we should go like this

$(document).on("click","#go_to_comments", function(e) {    e.preventDefault();      $("#commentaire").focus()     return false; })

mark pavlis Over a year ago

$(fieldSelector).focus(); is not working

user47322 · Accepted Answer · 2011-10-30 09:14:39Z

30

You can set where the cursor is in an input box with the selectionStart and selectionEnd properties. If you don't want any text to be selected, just make them equal to each other.

Here's how you might do it:

var input = $("input");
input[0].selectionStart = input[0].selectionEnd = input.val().length;

answered Oct 30, 2011 at 9:14

user47322

1 Comment

SCBuergel Over a year ago

this did not work on mobile safari for me, had to use the answer of Nicolas Modrzyk.

skolind · Accepted Answer · 2017-08-15 14:55:46Z

7

$(":input[name=xxxx]").focus();

Ah, you need the cursor to be after all the text? Take a look here: jQuery Set Cursor Position in Text Area it works the same for an input instead of a textarea.

This also works if you use other selectors.

edited Aug 15, 2017 at 14:55

skolind

1,7546 gold badges29 silver badges52 bronze badges

answered Oct 30, 2011 at 9:13

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

Comments

Zunaid Miah · Accepted Answer · 2022-03-11 10:07:53Z

1

You can use this :

jQuery('.className').focus();

Just use your input filed class name

answered Mar 11, 2022 at 10:07

Zunaid Miah

113 bronze badges

2 Comments

CodeTheorist Over a year ago

What happens if multiple fields use the same class? This should be an ID instead, to ensure that the correct field gets selected.

Zunaid Miah Over a year ago

we can select with parent class like- jQuery('.parentClass .className').focus();

Collectives™ on Stack Overflow

jQuery - Place cursor in input field when link clicked

4 Answers 4

4 Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related