jQuery: Get the cursor position of text in input without browser specific code?

Question

Is there any way in jQuery to get the current cursor-position in an text input without doing ugly browser specific code?

Like in:

<input id="myTextInput" type="text" value="some text" >

the cursor being after the "x" of "some text", I can get "8"?

related : http://stackoverflow.com/questions/2897155/get-caret-position-within-an-text-input-field — Haim Evgi, Nov 03 '10 at 08:48
Sorry, the input field was not showing in the beginning. That should tell what I want. — Ansgar, Nov 03 '10 at 08:59

score 36 · Accepted Answer · edited Mar 13 '19 at 20:12

36

You can't do this without some browser specific code, since they implement text select ranged slightly differently. However, there are plugins that abstract this away. For exactly what you're after, there's the jQuery Caret (jCaret) plugin.

For your code to get the position you could do something like this:

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

You can test it here.

edited Mar 13 '19 at 20:12

Liam

19,819
24
83
123

answered Nov 03 '10 at 10:40

Nick Craver

623,446
136
1,297
1,155

3

This Jquery Caret link http://plugins.jquery.com/project/jCaret is down. – Junior Mayhé Jul 02 '11 at 21:49
3

Link to the jCaret project at Google Code [http://code.google.com/p/jcaret](http://code.google.com/p/jcaret) – A. Tapper Jul 03 '12 at 14:29
@nickcraver Not working on my code. Do I need to add another source like ? – Sam San Feb 16 '13 at 02:34
Yeah, you need jQuery. – atp Aug 21 '13 at 18:26
.start is undefined in ie11. You need to use .begin – hewstone Oct 03 '14 at 18:22
2

I believe the link is now: https://bitbucket.org/accursoft/caret/src – Chris F Carroll Jun 17 '15 at 10:22

Rajesh Paul · Answer 2 · 2013-10-25T14:48:24.463

18

Using the syntax text_element.selectionStart we can get the starting position of the selection of a text in terms of the index of the first character of the selected text in the text_element.value and in case we want to get the same of the last character in the selection we have to use text_element.selectionEnd.

Use it as follows:

<input type=text id=t1 value=abcd>
<button onclick="alert(document.getElementById('t1').selectionStart)">check position</button>

I'm giving you the fiddle_demo

edited Oct 25 '13 at 14:48

answered Sep 19 '13 at 19:49

Rajesh Paul

6,793
6
40
57

Why do you bother putting el.value into var val? Abbreviating such an explicit term to only use it once seems just to confuse otherwise nice code (I've not run it yet :) – Lee Goddard Oct 25 '13 at 08:29
@LeeGee true and hence reduced the code. – Rajesh Paul Oct 25 '13 at 14:49
4

Great solution! It doesn't work in IE8, but who cares! – pmrotule Sep 16 '14 at 23:17

score 16 · Answer 3 · answered Oct 02 '11 at 12:36

16

A warning about the Jquery Caret plugin.

It will conflict with the Masked Input plugin (or vice versa). Fortunately the Masked Input plugin includes a caret() function of its own, which you can use very similarly to the Caret plugin for your basic needs - $(element).caret().begin or .end

answered Oct 02 '11 at 12:36

Daniel Gill

3,261
2
23
21

1

Also, the jsfiddle numbers do not look correct in the case where one might press the down/up keys. The cursor swings to the end of the text box but the value is not representative of such moves to the start/end of the input. – fooledbyprimes Nov 30 '11 at 02:05

score 7 · Answer 4 · answered Nov 03 '10 at 08:50

7

just came across while browsing, might help you javascript-getting-and-setting-caret-position-in-textarea. You can use it for textbox also.

answered Nov 03 '10 at 08:50

Chinmayee G

7,947
2
31
41

Unfortunately this website is no longer accessible. Do you remember what the implementation involved? – McStretch Mar 01 '20 at 00:29

jQuery: Get the cursor position of text in input without browser specific code?

4 Answers4

Linked

Related