关于TextArea，经常会碰到换行或者背景色，字体之类的问题。最近关于这些有了下面两个发现(IE下测试通过)。
1.TextArea的字体颜色等等
TextArea可以有子节点，所以可以给它加一个DIV之类的东西，然后在这个DIV里可以添加任意的HTML，这样就可以实现字体颜色等等。
下面这个Sample展示了如何控制TextArea的颜色和字体。
main.html
-----------------------------------------------------------------------------------
<html>
<form name="form2" method="post" action="xxxx">
<table>
<tr>
<td>
<textarea id="test" name="topic" rows="10" cols="40"></textarea>
<input type="button" value="Open new Window" onclick="openNewWindow();" >
</td>
</tr>
</table>
</form>
<Script Language="JavaScript">
function doReplace(returnValue) {
procedureRegexp = new RegExp('<FONT style="BACKGROUND-COLOR: #ffff00">', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp('<BR>', 'gi');
returnValue = returnValue.replace(procedureRegexp, '/n');
procedureRegexp = new RegExp('<DIV>', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp('</DIV>', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp(' /n', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp(' ', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp('</FONT>', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
procedureRegexp = new RegExp('<<', 'gi');
returnValue = returnValue.replace(procedureRegexp, '<<');
procedureRegexp = new RegExp('>>', 'gi');
returnValue = returnValue.replace(procedureRegexp, '>>');
procedureRegexp = new RegExp('&', 'gi');
returnValue = returnValue.replace(procedureRegexp, '&');
procedureRegexp = new RegExp('<FONT style="FONT-WEIGHT: bold; COLOR: #0000ff">', 'gi');
returnValue = returnValue.replace(procedureRegexp, '');
return returnValue;
}
function openNewWindow() {
var paramArray = new Array(3);
paramArray[0] = window;
var returnValue = window.showModalDialog("popupwindow.html",paramArray,"dialogWidth:800px;dialogHeight:600px;status:no;scroll:no");
document.form2.topic.value=doReplace(paramArray[0]);
}
</Script>
<html>
-----------------------------------------------------------------------------------
popupwindow.html
-----------------------------------------------------------------------------------
<form name="form1" method="post" action="1.asp">
<textarea id="test" name="topic" rows="10" cols="40"></textarea>
<input type="button" value="Go back" onclick="getValueBack();" >
</form>
<Script Language="JavaScript">
var parentValue = window.dialogArguments[0].document.form2.topic.value;
if(parentValue == '') {
var sampleDiv = document.createElement("div");
var divContent = "I select:<br>"
divContent = divContent + "<font style='background-color:#FFFF00;'>" + "China" + "</font>";
divContent = divContent + " VS " + "<font style='font-weight:bold;color:#0000FF;'>" + "USA" + "</font><br>";
divContent = divContent + "<font style='background-color:#FFFF00;'>" + "Chile" + "</font>";
divContent = divContent + " VS " + "<font style='font-weight:bold;color:#0000FF;'>" + "Haiti" + "</font><br>";
sampleDiv.innerHTML = divContent;
document.form1.topic.appendChild(sampleDiv);
} else {
document.form1.topic.value = parentValue;
}
function getValueBack() {
window.dialogArguments[0] = document.form1.topic.innerHTML;
window.close();
}
</Script>
-----------------------------------------------------------------------------------
从上面的代码可以看到:
a.TextArea可以添加子节点，上面添加的是DIV，其实别的任何元素都可以。
b.从popupwindow回到main页面的时候，需要把<br>换成"/n"，否则会丢失换行
2.关于TextArea的换行
在TextArea里头有两种换行的方式，一种是上面我们看到的<BR>，另外一种就是"/n"。
如果是上面的例子里头那样的话，可以用alert查看TextArea的value, value里头已经没有任何颜色字体格式的东西，
都是纯文本，所以如果想保持换行的话，可以用TextArea的innerHTML，这样的话，<font><br>之类的元素还可以看到，
但是父页面显示之前需要把这些元素替换掉，把<BR>替换成"/n"。