1

I tried looking at many stackoverflow discussions on how to get cursor position on a click on an input box (but many dealt with getting highlighted position using caret instead) - but nothing seems to be working for my very simple requirement.

All I want is a function which, when a mouse is clicked on an will return the position of cursor (in terms of character count from beginning) - please note that by position I mean the character position.

when you click somewhere on an editable input box with some text on it, I want to get the position (in terms of character count from beginning) of cursor after this click - so that I could remember this for a future click(for some specific UI requirement). –

Is there a jQuery (or javascript) function that would do? Any workarounds are welcome too.

Thanks

EDIT- some people are directing me to other posts - but please note that I could not use jQuery Caret or any other plug-in. All I got is jQuery.

Tintin
  • 2,853
  • 6
  • 42
  • 74
  • 1
    possible duplicate of [jQuery: Get the cursor position of text in input without browser specific code?](http://stackoverflow.com/questions/4085312/jquery-get-the-cursor-position-of-text-in-input-without-browser-specific-code) – TravisO Sep 19 '13 at 17:55
  • The click is the caret position, that's the only way to get the # of where it is located. They are one in the same. – Mark Pieszak - Trilon.io Sep 19 '13 at 17:55
  • 1
    Check out [this answer.](http://stackoverflow.com/a/1909997/2038227) – theftprevention Sep 19 '13 at 17:56
  • Let's clarify this, are you looking for the mouse cursor's position? – Kiruse Sep 19 '13 at 17:57
  • @Derija93 - when you click somewhere on an editable input box with some text on it, I want to get the position of cursor after this click - so that I could remember its position (for some specific UI requirement). – Tintin Sep 19 '13 at 18:09
  • @TravisO that answer requires jQuery Caret Plugin - I cant use any plugins for jQuery - corporate limitation. Only jQuery. Thanks. – Tintin Sep 19 '13 at 18:10
  • Why not copy the code of the jQuery Caret plugin into your own source code to make it available? If there is such a great difficulty to embed external resources... – Kiruse Sep 19 '13 at 18:15
  • Because I dont know the licensing and other requirements that might be involved in using the source of such plug-in. – Tintin Sep 19 '13 at 18:28
  • Check this article out: http://stackoverflow.com/questions/4085312/jquery-get-the-cursor-position-of-text-in-input-without-browser-specific-code – Ed DeGagne Sep 19 '13 at 18:41
  • This might help you: http://stackoverflow.com/questions/2897155/get-cursor-position-within-an-text-input-field – Ed DeGagne Sep 19 '13 at 18:44
  • @Tintin, Check the 2nd solution(I have given). – Rajesh Paul Sep 19 '13 at 19:35

3 Answers3

3

Got the solution. Try the following code with verified result-

<html>
<head>
<script>
    function f1(el) {
    var val = el.value;
    alert(val.slice(0, el.selectionStart).length);
}
</script>
</head>
<body>
<input type=text id=t1 value=abcd>
    <button onclick="f1(document.getElementById('t1'))">check position</button>
</body>
</html>

I'm giving you the fiddle_demo

Rajesh Paul
  • 6,793
  • 6
  • 40
  • 57
0

Assume HTML:

<input id="target" />

The following code gives you the mouse cursor's coordinates:

$('#target').click(function(jqEvt){
    console.log('Coordinates within textbox', jqEvt.offsetX, jqEvt.offsetY);
    console.log('Global coordinates', jqEvt.clientX, jqEvt.clientY);
});

See jQuery.Event

Kiruse
  • 1,703
  • 1
  • 12
  • 23
0

Put it in an <input type=image/>

When you use the <input type=image/> tag, you are telling the browser to submit the x and y coordinates where the image was clicked. This allows you to add image map type functionality to your forms.

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • But I dont need coordinates? I need the character count. Thanks. – Tintin Sep 19 '13 at 18:12
  • @Tintin What ? **Get position of the cursor in the ** and **All I want is a function which, when a mouse is clicked on an will return the position of cursor - please note that by position I mean the character position** I'm not feeling good anymore ... – Milche Patern Sep 19 '13 at 18:14
  • Sorry if it mislead - when you click somewhere on an editable input box with some text on it, I want to get the character position (count from beginning) of cursor after this click - so that I could remember its position (for some specific UI requirement). – – Tintin Sep 19 '13 at 18:18