pasteHTML behavior in IE 1

AliciaE · Jul 25, 2008

Has anyone experienced the following strange behavior in Internet Explorer? Does anyone know how to get around this?

Save the following code and open in IE, and select the whole line of the word "Red" (select from left to right) and then click the button. The word "Blue" turns red. If you select the paragraph of "New", the word "Blue" turns black. I've seen this happen with the "class" attribute as well as "style".

Code:

<html>
	<body>
		<input type="button" value="Click Me" onclick="javascript:document.selection.createRange().pasteHTML('<p>New</p>');alert(this.parentNode.outerHTML);" />

		<div>
			<p style="color:red;">Red</p>
			<p style="color:blue;">Blue</p>
		</div>
	</body>
</html>

Note: I'm using Internet Explorer 7.

BillyRayPreachersSon · Jul 25, 2008

Remove the <p> tags inside your "pasteHTML" call.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

AliciaE · Jul 25, 2008

Well, my example doesn't illustrate it, but I need to set the class name (in this example it could be the style attribute).

I'm not sure why the second paragraph is being affected.

tsuji · Jul 27, 2008

[1] I appreiciate the op posting this thread to underline an oddity on ie-proprietary method. I cannot offer an explanation of it apart from visualizing that the style objects must be attached to a node through some undisclosed out-or-ordinary mechanism.

[2] Nevertheless, I could clarify some details which may shed more light on the issue.

[2.1] On the "select from left to right", actually two different outcomes.
[2.1.1] The whole tag has been selected.
[tt]<p style="color:red;">Red</p>[/tt]
[2.1.2] Only the text "Red" has been selected.
[tt]Red[/tt]
[2.2] The different outcomes can be obtained by carefully manoevre the mouse to the ultimate end of line or stop immediately after the "d" of "Red".
[2.3] This can be verified by alerting the htmlText and Text attributes of the createRange(). Like this.
[tt]
<input type="button" value="Click Me" onclick="
[red]alert('htmlText:\n'+
document.selection.createRange().htmlText+
'\ntext:\n'+
document.selection.createRange().text);[/red]
document.selection.createRange().pasteHTML('<p>New</p>');
alert(this.parentNode.outerHTML);" />
[/tt]
[2.4] Two different outcomes:
[2.4.1] Oddity results for htmlText showing [2.1.1]
[2.4.2] No oddity results for htmlText showing [2.1.2].

[3] If one is happy with the pasteHTML in the form of "New" rather than "<p>New</p>", then using a read-write property of .text can achieve consistent result, namely, this.
[tt]
<input type="button" value="Click Me" onclick="
[blue]alert('htmlText:\n'+
document.selection.createRange().htmlText+
'\ntext:\n'+
document.selection.createRange().text);[/blue]
document.selection.createRange()[red].text='New'[/red]);
alert(this.parentNode.outerHTML);" />
[/tt]
[3.1] Note that .htmlText property is read-only and cannot be used in the above method. Hence, in the alternative ([3]) and in this particular sense, you won't be able to paste a html proper string with tags.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

pasteHTML behavior in IE 1

AliciaE

Programmer

BillyRayPreachersSon

Programmer

AliciaE

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor