Member Avatar for Will Gresham

Wasn't sure what to put as the title, but what is happening is this:
I have div elements on a HTML page, when they click on the div it is replaced with a textarea containing the div contents in order to edit this (eventually there will be a form/submission button there, but I need to sort this first) but the problem is that in IE it is printing all tags in uppercase, is there a problem with my code or is just just another problem in IE? (I am using IE6, I have not tested in 7 or 8)

Code:
HTML:

<h2><br>Signing Course.</h2>
<div id="event_1" onclick="edit_content(this.id)">Barrie Paddon is soon to start a group for those wishing to learn basic sign language.<br>
Barrie who has achieved level 2 in British Sign Language led a large
group last year who spectacularly sang The Lord’s Prayer in sign
language. All interested please contact the office.<br></div>

JS:

<script type="text/javascript">
function edit_content(container) {
if(document.getElementById(container).innerHTML.substr(0,5) == "<text") {
} else {
document.getElementById(container).innerHTML = "<textarea name=\"" + container + "\" rows=\"10\" cols=\"90\">" + document.getElementById(container).innerHTML + "</textarea>";
editing = '1';
}
alert(document.getElementById(container).innerHTML.substr(0,5));
}
</script>

IE outputs:

Barrie Paddon is soon to start a group for those wishing to learn basic sign language.<BR>Barrie who has achieved level 2 in British Sign Language led a large group last year who spectacularly sang The Lord’s Prayer in sign language. All interested please contact the office.<BR>

into the textbox, and the alert shows '<TEXT'

Any ideas?

  • 4 Contributors
  • 11 Replies
  • 332 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by xyzweb
Member Avatar for Will Gresham

Thanks for the link. I did search google but I couldn't find anything, probably just searching the wrong way :(

So do you know of a better way to do this? I did think about using toLowerCase() but this would remove all capital letters from the text as well... For the moment I am using a replace on all <br> <BR> <br /> and <BR /> to convert them to newline characters, but eventually some HTML tags other than br will be added to the text so this is only a temporary fix...

Thanks again :)

Member Avatar for Rambo Tribble

The W3C-approved method of appending an element uses the createElement and appendChild methods. The innerHTML method is actually IE-specific, though other browsers have adopted it for compatibility with web sites using it. It is convenient, but as you found, more a kludge than a properly designed solution. Here is a quick sample of using the techniques:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td{height:20px;width:40px;border:4px solid #daa;}
</style>
<script type="text/javascript">
function addRow(){
  var nw_td=document.createElement('td');
  var nw_txt=document.createTextNode("cell");
  nw_td.appendChild(nw_txt);
  var nw_tr=document.createElement('tr');
  nw_tr.appendChild(nw_td);
  document.getElementById('tbodOne').appendChild(nw_tr);
}
</script>
</head>
<body>
<table>
<tbody id="tbodOne">
<tr>
  <td>&nbsp;</td>
</tr>
</tbody>
</table>
<a href="#" onclick="addRow();return false;">add row</a>
</body>
</html>
Member Avatar for nav33n

I found this example. http://www.quirksmode.org/dom/cms.html
But again, he uses 'TEXTAREA' and not 'textarea' :-/

Using the example given in the website,

<html>
<body>
<head>
<script type="text/javascript">
var editing  = false;

if (document.getElementById && document.createElement) {
	var butt = document.createElement('BUTTON');
	var buttext = document.createTextNode('Ready!');
	butt.appendChild(buttext);
	butt.onclick = saveEdit;
}

function catchIt(e) {
	if (editing) return;
	if (!document.getElementById || !document.createElement) return;
	if (!e) var obj = window.event.srcElement;
	else var obj = e.target;
	while (obj.nodeType != 1) {
		obj = obj.parentNode;
	}
	if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
	while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
		obj = obj.parentNode;
	}
	if (obj.nodeName == 'HTML') return;
	var x = obj.innerHTML;
	var y = document.createElement('TEXTAREA');
	var z = obj.parentNode;
	z.insertBefore(y,obj);
	z.insertBefore(butt,obj);
	z.removeChild(obj);
	y.value = x;
	y.focus();
	editing = true;
}

function saveEdit() {
	var area = document.getElementsByTagName('TEXTAREA')[0];
	var y = document.createElement('P');
	var z = area.parentNode;
	y.innerHTML = area.value;
	z.insertBefore(y,area);
	z.removeChild(area);
	z.removeChild(document.getElementsByTagName('button')[0]);
	editing = false;
}

document.onclick = catchIt;
</script>
</head>
<p> This is a test! </p>
</body>
</html>
Member Avatar for Rambo Tribble

There's no reason you can't change "TEXTAREA" to "textarea" in the code. IE will still report the tag in upper case, however, if queried. Note that if you use a transitional DOCTYPE the case shouldn't be an issue for validation.

Member Avatar for nav33n

There's no reason you can't change "TEXTAREA" to "textarea" in the code.

You are absolutely right ! :icon_lol:

IE will still report the tag in upper case, however, if queried. Note that if you use a transitional DOCTYPE the case shouldn't be an issue for validation.

Hmm! I didn't know that..

Member Avatar for Rambo Tribble

Give this a try in different browsers; you'll see what I mean. Opera and FF do the same thing as IE, Konqueror, (and, presumably, Safari), preserves the case of the tag itself:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload=function(){
alert(document.getElementById("bod").tagName);
}
</script>
</head>
<body id="bod">
</body>
</html>

I suspect this is a remnant of earlier implementations that the browser vendors just haven't felt was necessary to address. This is, after all, an internal reference.

Member Avatar for Rambo Tribble

A thought occurs, if you want to have the tags appear as lowercase text within a dynamically generated element, you can take the text string generated by the browser and use a regular expression to find the text within <>, but not within "", and convert it to lowercase before sending the converted string to the alert. The alert should treat the string as inviolable.

Member Avatar for Will Gresham

Thanks for the ideas :)

Upper case tags are a no, I work in XHTML1.0 Strict :D
The suggestions posted are alot longer than my original, but if they are better in terms of standards then its all good.
I'll let you know how it goes :)

Member Avatar for Rambo Tribble

I recently read that the W3C is, in fact, recommending HTML 4.01 for current web pages. XHTML, it is said, is still considered "under development". Just so you know.

Member Avatar for xyzweb

This is a known issue with IE. It will return any request for the innerHTML or outterHTML as a mess of UPPERCASE tags, with attributes with no double quotes, style content exploded, re-aranged and UPPERCASE, with non-self closing tags... e.g. br, hr, img, link... etc.

A discussion about this can be found on Web Bug Track.

http://webbugtrack.blogspot.com/2008/01/bug-or-feature-round-one.html

It is also a "live" HTML value in IE, which includes the updated contents of a form element (if that is what you are inspecting)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.