Using mouse cursor position as a range starting point in CoffeeScript/JavaScript

Question

As the title states, I would like to use my cursor's position as the start point to a range.

Right now have simple sample like this

<html>
  .
  .
   <p>The quick brown fox jumps over the lazy dog</p>
  .
  .
</html>

On the CS/JS side of things I have event listen set to mouse move that attempts to print out the offset for the cursor position, however I am not using the correct method and end up getting either undefined or no method errors.

Again, really simple CS for the time being since I really just wanted to test it out.

$(document).ready ->

  $(document).mousemove ->
    target = event.target
    console.log("#{target.offset()}") // also tried .rangeOffset .offset

Ideally I would like something that I can input into a range.setStart() function.

For example, if I was to be moused over the f in fox I would want the offset to be return as 16 so that I may then set the start of the range like so range.setStart(target,16).

Any help setting me in the right direction would be greatly appreciated.

edit: After typing this up and submitting it I realized how silly it was to expect the element to give me back offset information. I am terribly lost, please guide me.

score 1 · Accepted Answer · answered Aug 27 '13 at 02:20

After much googling and many hours of troubleshooting I finally came up with a solution that works for my purposes.

The function document.caretPositionFromPoint() or for Webkit document.caretRangeFromPoint() takes X and Y coordinates from an event and returns a caret position that I can then use to create the start point of my range with.

$(document).ready ->

  setRange = (event) ->
      if document.caretPositionFromPoint
        #for Firefox
      else if document.caretRangeFromPoint
        range = document.caretRangeFromPoint(event.pageX, event.pageY)
        targetNode = range.startContainer
        offset = range.startOffset
        range.setStart(targetNode, offset)
        range.setEnd(targetNode, 10) #just to test

        sel = window.getSelection()
        sel.removeAllRanges()
        sel.addRange(range)

    element = document.getElementById("content")
    element.addEventListener('mousemove', setRange, true) #eventlistener instead of .mousemove for event bubbling

I updated a similar answer of mine yesterday: http://stackoverflow.com/a/11191372/96100 — Tim Down, Aug 27 '13 at 11:30

NicoArbogast · Answer 2 · 2013-08-25T13:25:44.027

~~You should be using pageX or pageY, like this~~

$(document).ready ->

  $(document).mousemove (e) ->
    console.log("#{e.pageX}")
    console.log("#{e.pageY}")

If you need to get the position relative to a div for example

$(document).ready ->

      $(document).mousemove (e) ->
        console.log("#{e.pageX - $('#divID').offset().left}")
        console.log("#{e.pageY - $('#divID').offset().top}")

Applied to your case, it would give you something like this

$(document).ready ->

  $('p').mousemove (e) ->
    console.log("#{e.pageX - $('p').offset().left}")
    console.log("#{e.pageY - $('p').offset().top}")

And moving your mouse over the paragraph containing your text will give you your mouse position inside the paragraph

see it working here http://jsfiddle.net/zXnk9/

EDIT

If you need to get the index of the character you are hovering you could use a trick like so:

Wrap your text inside a container that is exactly the width of your text

<span>The quick brown fox jumps over the lazy dog</span>

And then make the following calculation

$(document).ready ->
  // define the container for the text you are intersted in
  container = $('span')
  // on mouseover
  container.mouseover (e) ->
    // get container width
    container_width = container.width()
    // compute the avg character width base on the container width and the number of characters contained in your text. 
    // (If you have some complex formatting inside your container, you would have to adjust this calculation.)
    char_width = p_width / container.text().length
    // get the position of your mouse inside
    position_inside = e.pageX - container.offset().left
    // define the index of the character you are interested in
    char_index = Math.floor(position_inside / char_width) - 1
    // use it as you wish
    // print it for example
    console.log("#{char_index}")

You can check it working here. I've set the event to click so that you can try it precisely on the f of fox, it returns 16. http://jsfiddle.net/zXnk9/1/

EDIT 2: for a reliable way of doing what you are trying to do

When loading the document, put every character inside the container into an html node, like this

$(document).ready ->
  // set your container
  container = $('span')

  // define a replacement text string
  replacement_container_text = ''
  // iterate over each character inside your container
  $(container.text().split('')).each (i, char) ->
    // put it inside a span and add it to your replacement text string
    replacement_container_text += '<span>' + char + '</span>'

  // set the replacement text string as the html content of your container
  // this replaces the original text with the initial text with each 
  // character wrapped into a span 
  // (which can then be caught as targets for your mousemove events)
  container.html(replacement_container_text)

Then you can just get the index of the character on which your mouse is positionned with the following

container.mousemove (e) ->
  range_start = container.children('span').index $(e.target)
  console.log(range_start)

This will work with multi line containers, with paragraphs, etc.

See working example http://jsfiddle.net/2TBFV/

But how does one translate the x and y coordinates to an offset? — SlowBucket, Aug 25 '13 at 11:27
SlowBucket could you please tell us if it helps or if you still need help ? — NicoArbogast, Aug 25 '13 at 12:07
Sorry, just having the coordinates won't help me create a range. I am not well versed in JS so if you do know of a way to take the coordinates and use them here https://developer.mozilla.org/en-US/docs/Web/API/Range.setStart you would be my hero. — SlowBucket, Aug 25 '13 at 12:20
Hey, I finally got a good solution for this I think, see my EDIT 2 — NicoArbogast, Aug 25 '13 at 13:05
Thank you for your effort! I was trying to avoid span tricks but had I not found the solution I posted, I would have used yours. — SlowBucket, Aug 27 '13 at 02:21

Using mouse cursor position as a range starting point in CoffeeScript/JavaScript

2 Answers2

Linked