471,316 Members | 1,674 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,316 software developers and data experts.

implementing undo and redo for textarea's - does Javascript support static variables?

I'm offering users the ability to type weblog posts into a form and
post them. They type the text into a TEXTAREA which is on a form. The
form, when submitted, hits a PHP script. Before it is submitted, while
they are typing, I'm trying to offer them some common word processing
functions.

I want to implement unlimited undo and redo for the textarea. I've set
the textarea to onChange="addToArrayOfPastWork()";

My undo button gives me "undefined", but I suppose I can fix that with
a check on the index. My redo button seems to work.

Here is my question:
Currently I'm implementing currentFormIndexValue as a global variable,
but really I want it to be a static variable in a function that
handles both the undo and redo. Does Javascript allow static variables?
I checked here: http://developer.irt.org/script/vfaq.htm
but it didn't mention static variables.


// 12-04-04 - our form functions, especially McFormsPrintNow,
will output text boxes and textareas
// that call addToArrayOfPastWork() whenever anything changes.
Then elementsAdminShowFormattingButtons
// contains an undo and a redo button that lets users step
through the array and bring back
// past iterations of work.
arrayOfPastFormWork = new Array();
currentFormIndexValue = 0;

function undoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue - 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}

function redoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue + 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}
function addToArrayOfPastWork(myField) {
var newValue = myField.value;
arrayOfPastFormWork.push(newValue);
}

Jul 23 '05 #1
6 7814
few comments:

1. you need to catch the onpropertychange and not the onchange event
(at least in IE). in addToArrayOfPastWork you'll need to check if the
value property was changed (using event.propertyValue).
2. in redoFormWork and undoFormWork you'll need to detach the event
before assiging the value and attach back at the end of the functions
(or use some kind of a flag)
3. currently you do not clean the array from the current point to the
end once the user make a change (to prevent the redo action after a
change)
4. you cannot create a real static variable in javascript (you can use
prototype but it will not prevent you from changing the variable in a
specific instance of an object)

lk******@geocities.com wrote:
I'm offering users the ability to type weblog posts into a form and
post them. They type the text into a TEXTAREA which is on a form. The
form, when submitted, hits a PHP script. Before it is submitted, while they are typing, I'm trying to offer them some common word processing
functions.

I want to implement unlimited undo and redo for the textarea. I've set the textarea to onChange="addToArrayOfPastWork()";

My undo button gives me "undefined", but I suppose I can fix that with a check on the index. My redo button seems to work.

Here is my question:
Currently I'm implementing currentFormIndexValue as a global variable, but really I want it to be a static variable in a function that
handles both the undo and redo. Does Javascript allow static variables? I checked here: http://developer.irt.org/script/vfaq.htm
but it didn't mention static variables.


// 12-04-04 - our form functions, especially McFormsPrintNow,
will output text boxes and textareas
// that call addToArrayOfPastWork() whenever anything changes.
Then elementsAdminShowFormattingButtons
// contains an undo and a redo button that lets users step
through the array and bring back
// past iterations of work.
arrayOfPastFormWork = new Array();
currentFormIndexValue = 0;

function undoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue - 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}

function redoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue + 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}
function addToArrayOfPastWork(myField) {
var newValue = myField.value;
arrayOfPastFormWork.push(newValue);
}


Jul 23 '05 #2
Thank you, that is some very valuable feedback.

To clean the array from the current point to the end once a user makes
a change, to prevent redo, do I simply use array.pop() on all the
elements above the current index? Is there simpler way to do it than a
for loop?

As to static variables, I noticed this article by Richard Conford on
the subject:
http://www.litotes.demon.co.uk/js_in...te_static.html

Jul 23 '05 #3
On 9 Dec 2004 11:52:49 -0800, <lk******@geocities.com> wrote:

[snip]
To clean the array from the current point to the end once a user makes a
change, to prevent redo, do I simply use array.pop() on all the elements
above the current index? Is there simpler way to do it than a for loop?


Yes. Assign a value to the length property of the array. If the number is
smaller than the current length, the array will be truncated.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #4
Hot tip. So if I have this:

var myArray = new Array();
myArray[0] = 'Napoleon';
myArray[1] = 'Hannibal';
myArray[2] = 'Rommel';
myArray[3] = 'Caesar';
myArray[4] = 'Patton';

then if I go like this:

myArray.length = 3;

then the last two items, holding the names of Caesar and Patton, are
gone? If I then use push(), I'm placing something into the 4th
position, which will have an index of 3?

Jul 23 '05 #5
On 9 Dec 2004 14:40:54 -0800, <lk******@geocities.com> wrote:

[array, length 5]
myArray.length = 3;

then the last two items, holding the names of Caesar and Patton, are
gone?
You could have just tried it, you know. :P But yes, only the first three
will remain in the array.
If I then use push(), I'm placing something into the 4th position, which
will have an index of 3?


Yes.

As an aside, you might want to be careful using push and pop; versions of
IE earlier than IE5.5 don't implement it (unless the user updated their
JScript implementation separately).

If this is a concern, you can test for them and write your own versions if
they're not available:

if(Array.prototype) {
if(!Array.prototype.push) {
Array.prototype.push = function() {
for(var i = 0, n = arguments.length; i < n; ++i) {
this[this.length] = arguments[i];
}
return this.length;
};
}
if(!Array.prototype.pop) {
Array.prototype.pop = function() {var e, n;
if((n = this.length)) {
e = this[--n]; this.length = n; return e;
}
};
}
}

or, as far as pushing is concerned, it may be easier to write

arr[arr.length] = ...;

if only one value is concerned.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6
Can I call both the onChange and the onPropertyChange events, like
this? (Please ignore the escapes, this is PHP code):

<textarea id=\"$inputId\" name=\"$inputName\" style=\"height:200px;
width:100%;\" class=\"$class\" onChange=\"addToArrayOfPastWork(this)\"
onPropertyChange=\"addToArrayOfPastWork(this)\">

Also, when you write this:
"in redoFormWork and undoFormWork you'll need to detach the event
before assiging the value and attach back at the end of the functions
(or use some kind of a flag)"

Do you mean I need to protect against multiple events happening at
once? Do you mean I should set a flag to lock in the array to just one
function till a value has been assigned? If you meant something else,
could you elaborate?

Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Mickel Grönroos | last post: by
1 post views Thread by TEK | last post: by
4 posts views Thread by thanigai | last post: by
11 posts views Thread by Mad Joe | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.