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, Oct 30 '11 at 09:28
If you also want to move the caret at the visible part of the browser, have a look at this answer: http://stackoverflow.com/questions/7892902/possible-to-scroll-caret-into-view-inside-a-single-html-text-field-with-javascri/7893633#7893633 — Rob W, Oct 30 '11 at 09:42

score 52 · Answer 1 · edited Apr 02 '18 at 15:08

52

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 02 '18 at 15:08

472084

17,666
10
63
81

answered Oct 30 '11 at 09:16

Nicolas Modrzyk

13,961
2
36
40

I've updated the question, how would you add the trick to my current code, to replace the text? – skolind Oct 30 '11 at 09:30
2

This is the way to go! – klewis May 09 '14 at 19:42
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; })``` – John Max Feb 26 '18 at 21:09
$(fieldSelector).focus(); is not working – mark pavlis Jun 20 '23 at 18:01

score 30 · Accepted Answer · answered Oct 30 '11 at 09:14

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 '11 at 09:14

this did not work on mobile safari for me, had to use the answer of Nicolas Modrzyk. – SCBuergel Sep 21 '16 at 16:53

score 7 · Answer 3 · edited Aug 15 '17 at 14:55

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 '17 at 14:55

skolind

1,724
6
28
51

answered Oct 30 '11 at 09:13

Ariel

25,995
5
59
69

score 0 · Answer 4 · answered Mar 11 '22 at 10:07

0

You can use this :

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

Just use your input filed class name

answered Mar 11 '22 at 10:07

Zunaid Miah

1
1

What happens if multiple fields use the same class? This should be an ID instead, to ensure that the correct field gets selected. – Alex Ander Mar 11 '22 at 11:20
we can select with parent class like- jQuery('.parentClass .className').focus(); – Zunaid Miah Mar 11 '22 at 17:56

jQuery - Place cursor in input field when link clicked

4 Answers4

Linked