Log in

View Full Version : Coding Challenge: Change innerText without changing its style.


mwan0061
07-20-2006, 04:05 AM
How can we change some element's innerText without changing the innerText's style?
I need to do this:
There's a div on the page. Inside the div, there's just text, but with different fonts. E.g. aaaaaaaaaaaaaaabbbbbbbbbbccccccccccccc
And there's a input field, shows the content of the div. A user can change the stuff inside the input field then the div will change accordingly. Say if someone replace all the a's with d's, the div will appear as:
ddddddddddddddbbbbbbbbbbccccccccccccc
How can I make this happen?
jscheuer1
07-20-2006, 06:13 AM
Only change the text.
Twey
07-20-2006, 12:12 PM
Don't use innerText, it only exists in IE.
jscheuer1
07-20-2006, 05:17 PM
I didn't think there was such a thing as innerText. Anyways, my suggestion should work, if you set a variable to the innerHTML of the overall containing element, then work whatever changes you wish upon it as a variable, and then assign it as the overall containing element's innerHTML.
Twey
07-20-2006, 05:22 PM
This could be one of the rare situations where the DOM methods are simpler to use, if you wish to keep the fonts constant.
jscheuer1
07-20-2006, 06:47 PM
Could be.
jscheuer1
07-20-2006, 08:18 PM
As long as you do not delete or backspace over where the unseen font tags are. This works in IE and Opera9, not in FF:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#theTxt {
border:1px solid gray;
width:400px;
}
</style>
<script type="text/javascript">
function loadTxt(){
document.getElementById('theTxt').innerHTML=document.getElementById('theDiv').innerHTML//.replace(/<[^>]*>/g, '')
}
function loadDiv(){
document.getElementById('theDiv').innerHTML=document.getElementById('theTxt').innerHTML
}
onload=loadTxt;
</script>
</head>
<body>
<div id="theDiv"><font face="arial">aaaaaaaaaaaaaaa</font><font face="serif">bbbbbbbbbb</font><font face="arial">ccccccccccccc</font></div>
<div contenteditable id="theTxt"></div>
<input type="button" onclick="loadDiv()" value="Update">
</body>
</html>
mwan0061
07-21-2006, 05:45 AM
Thanks heaps John! That works all fine. Thanks everyone for your time.