Tracking changes in a textarea

[jekillen]

I have a project that is primarily a web based text editor.

It loads text files from the sites directory structure and

puts the contents in a textarea using php on the server side.

 

I want to track changes to the text in the textarea;

 

I assign an event listener to the textarea onload that listens

for the onchange event. But when I focus the textarea to begin

editing, there doesn's seem to be any of these actions that

cause the onchange event. So I change it to onkeypress.

Now I get events generated.

 

When the page first loads, the contents in the textarea are

copied in a variable that acts like a buffer.

 

So, now I can run code onkeypress that will compare the contents

after the keypress to the contents of the buffer and detect a change.

That should cause dom insertion of an advice string about unsaved changes.

 

BUT;

In the test file, setting the cursor an typing a space does not cause the adice

string to appear. Then I backspace over the space I just created. The string

should now equal the string in the buffer and remove the advice. But that is

not what happens. The unsaved changes string appears.

 

Now, I delete a period at the end of the line, just before the current cursor location.

The unsaved changes: the advice string disappears.

Then I re-enter the period. Now I see the advice string again.

 

It clearly is not behaving as I would expect it.

The following is the relevant js code. It is a portion of a much longer object constructor

function:

"getButtons()" is run in another public function ( this.init() ) in the window.onload event

 

function _EDITOR() { var getButtons = function() { var buttons = document.getElementsByTagName('INPUT'); if(buttons.length) { for(var i = 0; i < buttons.length; i++) { if(buttons.type == 'button') { buttons.addEventListener('click', function(e){ buttonHandler(e) }, false) } } } var ta = document.getElementById('FT') // textarea id if(ta) { editBuffer = ta.value; ta.addEventListener('keypress', function(e){ setSaveChanges(e)}, false) } } var editBuffer = ""; var setSaveChanges = function(e) { var advise = document.getElementById('SAstat') // span element id if(advise) { if(e.target.value != editBuffer) { advise.style = "color:#cc6666"; advise.childNodes[0].data = "Unsaved changes"; } else if(e.target.value == editBuffer) // if the textarea version == the editBuffer version { advise.style = "color:#000033"; advise.childNodes[0].data = ""; } } }

// the following is called the window.onunload event this.clearEditBuffer = function() { editBuffer = ""; }

// ....etc ...

 

It appears that maybe the editBuffer variable is also being revised(?)

 

Thanks for time attention and patience.

JK

 

[dsonesuk]

Perhaps keyup would be a better option. Give it suffient time to add character, and the character is present to process.

[jekillen]

Thank you, Members;

 

I will give it a try.

 

..... YES.. that did the trick, thanks (using keyup instead of keypress )

Edited October 13, 2015 by jekillen