Whacked out contentEditable/color weirdness

C

Csaba2000

I am going nuts on this. Am I just blind, or is there some bug either in my code or IE?

Nutshell version: I have a content editable div that is supposed to show its entry in red if it is not what it
started out with. This works, EXCEPT if the content is completely erased(!) character by character, starting from
the right(!). In that case, the color gets stuck on red. I've made a web page for this at
http://csaba.org/demoDiv.htm The uncommented version appears below.

The thing that makes this so massively weird to me is that the behaviour seems to stem from the way in which a
boolean variable is set. If you look at the code below, you'll see that nonEmpty is supposed to be a boolean. In
fact, the color value that the iff returns is correct, and it gets set, and evidently ignored. If the nonEmpty = ...
line is commented out, however, then the line above it takes over, which is doing the same thing as the commented out
line. With the difference that the font color is now reset properly.

I'd love to be enlightened on this or know where I can delve further.

Thanks,
Csaba Gabor from New York

The short form of the demo page follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<META http-equiv="content-type" content="text/html;charset=iso-8859-1">
<TITLE>color problem</TITLE>
<SCRIPT>
function divPrep() {
myDiv = document.getElementsByTagName("DIV")[0];
myDiv.saveText = myDiv.outerText;
}
function cellChange() {
var nonEmpty;
if (myDiv.outText!="") nonEmpty=true; else nonEmpty=false;
nonEmpty = (myDiv.outerText!="");
myDiv.style.color =(myDiv.saveText!=myDiv.outerText && nonEmpty) ? "red" : "";
}
</SCRIPT>
</HEAD>
<BODY onLoad="divPrep()">
<TABLE border=1><TR><TD><DIV accesskey=i contentEditable onKeyUp="cellChange()">DIV</DIV></TD></TR></TABLE>
</BODY>
</HTML>
 
C

Csaba2000

I have since isolated the problem and posted my observations in
microsoft.public.windows.inetexplorer.ie55.programming.dhtml.scripting

The bug is that if you try to change the font .style.color on an
empty DIV under certain conditions (deleting the final, unselected
character with the backspace key), it kills being able to set .style.color
for the DIV for the rest of that page's session

Apropos, in the code that I posted in this group there is a typo in the
second line of cellChange: myDiv.outText should have been myDiv.outerText
Had that been the case, the commented out version also would not have worked.

However, by changing cellChange as follows, the problem can be circumvented:
function cellChange() {
var oT = myDiv.outerText;
if (myDiv.outerText!="")
myDiv.style.color =(myDiv.saveText!=oT && oT!="") ? "red" : "";
}

Regards,
Csaba Gabor from New York
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,144
Latest member
KetoBaseReviews
Top