0

I am building a site where users can select certain parts of the text to have them translated into another language. There is a limit though - if the string selected by the user is too long, the translation cannot be performed. I would like to be able to change the color of the selection (via CSS ::selection) when the users get over the allowed length of selection while dragging their mouse selecting text. Is there a way how to observe the change of length of the selected string with JavaScript? Mouseup event will not work - the point is to warn users that their selection is too long before the mouseup.

honzzz
  • 753
  • 1
  • 16
  • 26
  • You should look this post : http://stackoverflow.com/questions/6251937/how-to-replace-selected-text-with-html-in-a-contenteditable-element – queval_j Oct 15 '14 at 12:51

2 Answers2

2

onMouseDown - start listening to onMouseMove event.

onMouseMove - get selection and update your styling.

onMouseUp - remove onMouseMove event listener

jnr
  • 762
  • 1
  • 7
  • 9
1

One solution could be to start polling the selection after mousedown. In a listener for mousedown, start periodically reading the selection at a suitable frequency. Then, on mouseup, stop the polling.

Flynn
  • 5,472
  • 6
  • 37
  • 54