1

I have a textarea that when hovered, I would like the caret to follow the cursor. It would be like if I clicked the textarea every time I moved my mouse. Here is my current js:

$("textarea").on("mousemove", function() {
    $(this).trigger("click");
});

I don't want to move the mouse, but the caret in the textarea. Codepen link

Update

jQuery Set Cursor Position in Text Area similar but how I can use mouse's co-ordinates to set the carets position using this method. If I receive X:120 Y:244 how can I use this method to set the caret

Community
  • 1
  • 1
yaclive
  • 45
  • 7
  • 3
    Provide your attempts, some example code and narrow down the question to what you're struggling with. Otherwise it just looks like you want someone to do it for you and thats not what Stackoverflow is intended for. – Brian Dillingham Sep 07 '14 at 07:38
  • Fair enough, here is a link to a code pen project: [link](http://codepen.io/anon/pen/gyunh). I'm trying to use jQuery's .trigger() function but it isnt replicating a true mouse click. Thank you for your feedback. :) – yaclive Sep 07 '14 at 07:54
  • See how much better that looks :) – Brian Dillingham Sep 07 '14 at 07:58
  • The blinking line that marks your current position in a textbox. – yaclive Sep 07 '14 at 07:59
  • 1
    This is good but I cant see how I can use mouse's co-ordinates to set the carets position using this method. If I receive X:120 Y:244 how can I use this method to set the caret. – yaclive Sep 07 '14 at 08:08
  • Now you have a good question :) – Brian Dillingham Sep 07 '14 at 08:17
  • Wow that does look much better. Thank you very much. I appreciate your patience towards a novice like me :) – yaclive Sep 07 '14 at 08:19

1 Answers1

1

There are a couple of reasons why you might reconsider implementing such a function.

1. Performance mouseover triggers a lot of events in a very short amount of time in which you'd have to recalculate the caret position. On low-end devices (such as netbooks or smartphones) this can very quickly become very laggy.

2. Usability In case of laptops and netbooks it can easily happen that you accidentally touch your touchpad and therefor accidentally move the cursor to a whole new position which can be really annoying.

3. Support Consider that most touch computers such as tablets and smartphones won't be able to use your function.

4. Usage I can't think of any usage case where this function could be benefitial. The only thing you win is one less click on the user side. Consider that the user already moved the cursor to the specific position that he wants to edit. One more finger press down doesn't take any effort at all.


That said, if you still decide to go for it for whatever reason you got, what you have to do is get the line height of every row of the textarea field. Use a mono font where each character has the same width. Get the height and width of the textarea field. Get the hidden part of the textarea field when the scroll bar is not at the top. And lastly get the cursor position inside the textarea. From all that data you may be able to calculate the index of the string and then use the jquery function you linked where both arguments are the same $("textarea").selectRange(pos, pos);

Ke Vin
  • 2,004
  • 1
  • 18
  • 28
  • 2
    Some very good points here. The bigger picture for this feature is a drag and drop 'tooltip'. I wanted the caret to track the 'tooltip' so it appears that you are about to insert the content. On release the word in the tooltip would be inserted where the caret is currently. Thank you for your feedback :) – yaclive Sep 07 '14 at 10:26
  • @yaclive Did you ever find a solution for this? Trying to do exactly the same thing and wondering if you ever came up with something better? – Henry Howeson Jul 31 '19 at 09:24