Using Mouse Cursor Position As A Range Starting Point In Coffeescript/javascript

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 . .

The quick brown

Solution 1:

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) ->
      ifdocument.caretPositionFromPoint
        #forFirefoxelseifdocument.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 .mousemovefor event bubbling

Solution 2:

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 exampleconsole.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/