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.

HonzaBé
  • 752
  • 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
  • 790
  • 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,903
  • 7
  • 38
  • 55