'Re: JavaScript: Reading/Writing to TextArea with "innerText"'

[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kfm-devel
Subject:    Re: JavaScript: Reading/Writing to TextArea with "innerText"
From:       Stefan Eilers <stefan.eilers () basyskom ! de>
Date:       2007-07-06 13:48:34
Message-ID: 40BF50BE-FE56-4AC5-A3B5-47DB39789CF8 () basyskom ! de
[Download RAW message or body]

[Attachment #2 (multipart/mixed)]


HI Maksim!

Am 05.07.2007 um 17:21 schrieb Maksim Orlovich:

>> Hi!
>> Am 06.06.2007 um 15:22 schrieb Maksim Orlovich:
>>
>> Sorry for this delay. I was a little bit busy..
>
> No problem. I have a patch that fixes this:
> http://lists.kde.org/?l=kfm-devel&m=118141580921767&w=2

Ah cool! You patch looks much better than mine.

>
> Though I didn't get a chance to commit it yet. Sorry, I probably  
> should
> have CC'd you.

No problem. But I don't read this mailing list on a daily manner.  
Therefore it is a good idea to use a CC for me.. :)

> I think that this makes some of the stuff below moot.
> Could you perhaps test that patch w/the app to make sure it fixes  
> things?

Sure.

It works quite well. There is just one issue which is related to my  
test page. Reading the content of the textarea using the command  
"innerText" does not work with your patch (like it works with IE).  
Please use the example attached below. It shows the content of the  
text area after clicking the button "kick me". Your release shows the  
text that was written with "innerText" and not the text in the text  
area.

>
>>> So there are a couple of questions that need to be answered first:
>>> a) Does changing the child text nodes reset the value? If so,
>>> innerText
>>> should not be changed, but HTMLFormElementImpl needs to work for  
>>> child
>>> changes, which would be rather tricky.
>>
>> I thought about this issue. But implementing it this way is beyond my
>> knowledge about the implementation details. The interesting question
>> is, how IE does it. Do they really change the child nodes? I don't  
>> know.
>
> IE is bizzarre. The child nodes actually seem to even reflect what got
> typed by the user.

This seems to be the reason, why "innerText" is working for reading  
the content of the textarea..

> Actually, every browser does it differently, Opera is
> probably the closest to your patch..

This compatibility stuff is very unpleasant..

Mfg., Dr. Stefan Eilers
--  

Dr.-Ing. Stefan Eilers
Projekt Manager

basysKom GmbH
Robert-Bosch-Str. 7 | 64293 Darmstadt | Germany
Tel: +49 6151 3968753 | Fax: -736 | Mobile: +49 170 4213459
stefan.eilers@basyskom.de | www.basyskom.de

Handelsregister: Darmstadt HRB 9352
Geschaeftsfuehrung: Eva Brucherseifer


["eingabefeld.html" (eingabefeld.html)]

<html>
	<head>
<script type="text/javascript"> <!-- Script-Bereich einleiten -->
function Start(){
	// The following just works on Firefox and IE
	// document.getElementById('txtSection0').contentWindow.document.designMode = "on";
	document.getElementById('txtArea0').innerText = "This text should be visible";
	document.getElementById('txtArea0').oncontextmenu="ContextMenu"
	document.body.style.cursor = "normal";
}


function GetText(){
	var strStr = document.getElementById('txtArea0').innerText;
	alert( "Entered:" + strStr ); 
	DisplayLoading();
	alert( "test" );
	
}	

function ShowSection(iNumber)
{
	alert( "ShowSection()" );
	return true;
}

function ContextMenu(e)
{
	alert( "ContextMenu" );
	return true;
}

</script>


		<title>TextArea Test</title>
		<link id='page_style_sheet' rel="stylesheet" type="text/css" href="Styles.css">
	</head>
	<body onLoad="Start()">
			<TABLE id="tblSection0" openSection='0' style="background:red; FONT-WEIGHT: bold; \
LEFT: 0px;  WIDTH: 821px; COLOR: white; BORDER-STYLE: none; POSITION: absolute; TOP: \
150px; HEIGHT: 165px;" cellSpacing="1" cols="1" cellPadding="1" border="0">  <TR \
id="trTitleSection0">  <TD id="tdSection0" background="images_PNG/bar_fade.png" \
style="BORDER: 1px darkblue solid; CURSOR:pointer; CURSOR: hand; HEIGHT: 22px; \
BACKGROUND-COLOR: royalblue" onclick="return ShowSection(0);" align="left" \
colSpan="2" height="22" title="Click here to 'Open' this section of your essay.">  <p \
id="pSection0">Section 0</p>  </TD>
				</TR>
				<TR id="trSection0" >
					<TD onblur="return SectionOnBlur()" style="background:#c2d8e6;">
						<iframe src='frame_src_2.html' id="txtSection0" onblur="return SectionOnBlur()" \
style= "display: none; Z-INDEX:0; background-color:white; LEFT: 0px; MARGIN: 2px; \
WIDTH: 730px; POSITION: relative; TOP: 0px; HEIGHT: 127px" tabindex="1">  </iframe>
						<textarea id="txtArea0" onblur="return SectionOnBlur()" \
style="font-family:veranda; font-size:12pt; DISPLAY: block; LEFT: 0px; MARGIN: 10px; \
WIDTH: 730px; POSITION: relative; TOP: 0px; HEIGHT: 127px" tabindex="1">This text   \
should never be visible!  </textarea>
					</TD>
					<td style="background:#c2d8e6;" valign=middle>
						<TABLE id="instructional_table_0" style="background:#c2d8e6; font-size:10pt; \
font-weight:bold; WIDTH: 108px; HEIGHT: 51px; border-width:0px;" cellSpacing="2" \
cellPadding="0" width="78" border="0">  <TR>
								<TD unselectable='on' title="Want a hint?" \
style="cursor:pointer;cursor:hand;" id="colHint0" onmouseup="return \
imgHint_onclick()" onmouseover='this.style.color="blue";' \
                onmouseout='this.style.color="black";' >
									<IMG id="imgHint0" height="21" src="images_PNG/help.png" style="LEFT: -1px; \
POSITION: relative; TOP: 3px">  Hint
								</TD>
							</TR>
							<TR>
								<TD unselectable='on' title="Want feedback on your essay?" \
style="cursor:pointer;cursor:hand;" id="colTutor0" onmouseup="return \
imgTutor_onclick(0)" onmouseover='this.style.color="blue";' \
                onmouseout='this.style.color="black";' >
									<IMG id="imgTutor0" height="21" src="images_PNG/check.png" style="POSITION: \
relative; TOP: 2px">  Tutor
								</TD>
							</TR>
							<TR>
								<TD unselectable='on' title="Want to see synonyms for a word? Highlight the \
word and click thesaurus." style="cursor:pointer;cursor:hand;" \
onmouseover='this.style.color="blue";' onmouseout='this.style.color="black";' \
                id="colThesaurus0" onmouseup="return \
                imgThesaurus_onclick('colThesaurus0')">
									<IMG id="imgThesaurus0" style="POSITION: relative; LEFT: -1px; TOP: 3px" \
height="21" src="images_PNG/thes8.png">  Thesaurus
								</TD>
							</TR>
							<TR>
								<TD unselectable='on' title="Want to view the sentence tree?" \
style="cursor:pointer;cursor:hand;" id="colTree0" onmouseup="return \
imgTree_onclick()" onmouseover='this.style.color="blue";' \
                onmouseout='this.style.color="black";' unselectable=true>
									<IMG id="imgTree0" height="21" src="images_PNG/tree.png" style="LEFT: -1px; \
POSITION: relative; TOP: 3px">  Tree
								</TD>
							</TR>
						</TABLE>
					</td>
		<div name="fFeedback" id="fFeedback" style="DISPLAY: none; border:1px solid \
darkblue; overflow:auto; z-index: 110; POSITION: absolute;"></div>

				</TR>
			</TABLE>
		<button onClick="return GetText();" class="input_off" id="cmdLogin"  \
style='font-size: 13px;height:25px; color:black; width:80px;' \
onmouseout="this.className='input_off'" type="button" value="Kick Me!" \
name="fldType">Kick Me</button>

	</body>
</html>


["PGP.sig" (application/pgp-signature)]

[prev in list] [next in list] [prev in thread] [next in thread]
Configure | About | News | Add a list | Sponsored by KoreLogic