ContentEditable / Color bug
Csaba2000
further changes to the font color.
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(!) in such a way that the single,
unselected, last remaining character is deleted with the
backspace key(!). In that situation, 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 causing the bug in the above situation
is trying to change the color on the empty DIV.
This is demonstrated by uncommenting out the
middle line in the cellChange function:
if (myDiv.outerText!="")
It would be great to know whether this is also happening
on more recent versions and a reference if this problem
has been previously reported.
Thanks,
Csaba Gabor from New York
Originally posted a variant on comp.lang.javascript
but there was no reply and I have since isolated the
problem. Since it's IE specific (happening on IE 5.5
without service packs on my Win 2K Pro machine).
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 language=javascript type='text/javascript'>
function divPrep() {
myDiv = document.getElementsByTagName("DIV")[0];
myDiv.saveText = myDiv.outerText;
myDiv.contentEditable = true;
myDiv.accessKey = "i"
}
function cellChange() {
var oT = myDiv.outerText;
// if (myDiv.outerText!="")
myDiv.style.color =(myDiv.saveText!=oT && oT!="") ? "red" : "";
}
</SCRIPT>
</HEAD>
<BODY onLoad="divPrep()">
<H1>Content editable and color weirdness</H1>
<TABLE border=1><TR>
<TD><DIV onKeyUp="cellChange()">DIV</DIV></TD>
</TR></TABLE>
</BODY>
</HTML>
David Lovell [MSFT]
Explanation
When you use outerText, you include the <DIV> tag itself. That tag contains
the style="color:red" defintion. Since you changed this from black to red,
it wont be the same when you compare outerText to original outerText even if
the contents of the DIV itself go back to what it was.
--
Thanks,
David W. Lovell
This posting is provided "AS IS" with no warranties, and confers no rights.
If a script was included within this post, use of included
script samples are subject to the terms, specified at
http://www.microsoft.com/info/cpyright.htm"
Please do not send e-mail directly to this alias. This alias is for
newsgroup purposes only.
"Csaba2000" <ne...@CsabaGabor.com> wrote in message
news:eX2ELmna...@TK2MSFTNGP10.phx.gbl...
Csaba2000
Firstly, I would like to thank you for replying. I really appreciate that.
However, changing outerText to innerText does not fix the situation
(at least on my IE 5.5 / Win 2K Pro machine). I have made a few
modifications to my code to illustrate this, and I can demonstrate the
problem occurring in a few other ways.
Note that I have changed the reference to innerText from outerText.
Also, If the text differs from the original and is at least two characters
then it should be yellow. If the text is a single character, it should be red.
myDiv.style.color should set the entire Div's font color, no?
Here we go:
Anamoly 1: click at the end of the DIV. Hit the backspace three times.
Note that after the first backspace, when the div says DI, the color is yellow.
Now type in D => color is red. Now type in I => the color is still red. This
is incorrect, the color should be blue since the text length is at least 2 long.
Anamoly 2: put the cursor at the end of the DIV. Hit backspace once.
The color changes from black to yellow. Now type V. The DI is now blue
but the V is black. This is incorrect since DIV should be blue. But it makes
one suspect that perhaps the onchange is firing before the character has
appeared (or something like that). This is not the case however, since if
we enter another letter X, the DI is now in yellow while the VX is in black.
If the experiment is repeated so that the cursor is started between the I
and the V, and then the delete key is pressed, the DI is now yellow. Now
type V. DIV shows in blue. Now type X, DIVX shows in yellow. This is
correct behaviour.
Anamoly 3: put the cursor at the end of the DIV. Hit backspace once.
The color changes from black to yellow. Now type X. The DI is now
yellow, but the V is black. This is incorrect since DIX should be yellow.
Now type V. The DI is in yellow while the VX is in black. This is incorrect
since DIVX should be all yellow.
If the experiment is repeated so that the V is selected and then X is
pressed, DIX shows in yellow (correct). If a V is now typed DIXV shows
in yellow (correct).
Anamoly 4: putting the cursor at the end, erase the last two characters
with backspace, then type in IV. The D will show in blue while the IV
will show in yellow.
Regards,
Csaba Gabor
Revised 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 language=javascript type='text/javascript'>
function divPrep() {
myDiv = document.getElementsByTagName("DIV")[0];
myDiv.saveText = myDiv.innerText;
myDiv.contentEditable = true;
myDiv.accessKey = "i"
}
function cellChange() {
var oT = myDiv.innerText;
var newColor = (myDiv.saveText!=oT && oT!="") ? "red" : "blue";
if (oT.length>1 && newColor=="red") newColor = "yellow";
myDiv.style.color =newColor;
}
</SCRIPT>
</HEAD>
<BODY onLoad="divPrep()">
<H1>Content editable and color weirdness</H1>
<TABLE border=1><TR>
<TD><DIV style="font:bold" onKeyUp="cellChange()">DIV</DIV></TD>
</TR></TABLE>
</BODY>
</HTML>
"David Lovell [MSFT]" <dlo...@online.microsoft.com> wrote in message news:#TLTaWBb...@tk2msftngp13.phx.gbl...
Csaba2000
Jarrod
wrote:
Don't know if I have solved it but I have a solution.
I (just for a giggle) had a look at what the innerHTML of the document
was doing, and it was doing some funny stuff like adding a font tag.
So even though you where changing the style of the div tag, the font
tag overrode it. I tried this and it seemed to work. Don't know if it
is what you want.
function cellChange() {
var oT = myDiv.innerText;
myDiv.innerHTML=oT; // ADDED THIS LINE TO
// GET RID OF THE CURRENT innerHTML
newColor = (myDiv.saveText!=oT && oT!="") ? "red" : "blue";
if (oT.length>1 && newColor=="red") newColor = "yellow";
myDiv.style.color =newColor;
}
Hope this helps?
Jarrod
Csaba2000
You are a sharp cookie. Yes, I think that what goes on
is that the cursor has its own characteristics just as the
cursor in Word. I'm betting that they've forgotten to apply
the .style.color setting to the cursor if it's at the "end" of
the div element when the color change happens. Therefore,
it "must" lay down a font element (next time a character comes
along), which is sticky.
Well, I think it may help Microsoft, and it is even better
in isolating the issue. As indicated in my first post, I
already had a workaround. I just submitted it because
I thought it was a bug (and I still do).
Csaba
PS. I'm backlogged in responding but am planning to
come back to you on your other post.
"Jarrod" <jar...@bikepics.com> wrote in message news:vb8skv06q79bfuigf...@4ax.com...