0

In HTML input of type text I'd like to identify adding or removal of particular characters at their exact location.

E.g. predefined value of text input is string aa. User manipulates the string, using all kinds of editing - striking Backspace and Delete keys, selects text and deletes it \ replaces by another text. The final result of the manipulation is string a.

I'd like to know if:

  • first a was removed
  • last a was removed
  • both a's were removed and new a character was added

One of my ideas is assigning each character some kind of unique id that may be used to identify deletion of particular character, but i have difficulties implementing it.

I can use all kinds of Javascript tools and libraries for in-browser usage.

agoldis
  • 1,067
  • 16
  • 28

1 Answers1

0

Why not use onFocus / onChange / onKeyUp on the input node and then track all buttons pressed and the caret position ? You should figure out the rest by yourself :)

Just store the original value in a var and see what changes to it are being done and track them. When the input loses focus or buttons are no longer pressed you can finalise the function / unplug it. That's it.

Here there are some useful links on how to track key and caret but I am sure there are planty more :

Set keyboard caret position in html textbox

http://snipplr.com/view.php?codeview&id=5144

JavaScript multiple keys pressed at once

Wdyt?

Community
  • 1
  • 1
Proqb
  • 335
  • 1
  • 3
  • 7
  • I considered that approach, but i'm too lazy to implement it. let's see may be someone already has the implementation : ] – agoldis Aug 20 '15 at 11:00
  • If you are looking for OOTB solution then maybe you should consider using something more powerful than text input, like ckeditor. There is for example loopindex: https://github.com/loopindex/ckeditor-track-changes – Proqb Aug 20 '15 at 12:01