问题的来由
今天有一位朋友问到关于 textarea
标签的问题,开始时我不以为意。因为在我看来,因为这是一个很简单的标签,它表示一个可增删字符的文本域,可以利用 textarea
的 placeholder
和 value
属性来做一些适当的操作;用 cols rows 控制 列数,行数(当然,更好是用CSS的width和height)......嗯,就这些了。不过,你可以先看看下面的代码:
<textarea cols="20" rows="5"><i>斜体</i></textarea>
这是什么?
textarea
里的 i
真是一个“斜体”吗?结果你应该能猜到,它不可能是一级标题,其真正表现如下:
<textarea cols="20" rows="5"><i>斜体</i></textarea>
在 textarea
中的所有字符,都会被当作是“字符串值”,也就是说 “<i>”
只是 '<'+'i'+'>'
的一个字符串, textarea
内不可能存在其他标签。到这里,你甚至可能就会有个疑问了,为什么 textarea
是一个双标签?在标签内写入字符串有什么用?
我们可以试验以下代码:
<textarea cols="20" rows="5"><i>斜体</i></textarea>
document.getElementById('mt').innerHTML;// "&lt;o\i&gt;标题&lt;/i&gt;"
document.getElementById('mt').value;// "<i>斜体</i>"
有趣的是,在读取 innerHTML
的时候,尖括号字符都被变为转义字符,而且我们尝试去读其 value
值时,竟然可以完整读取里面的内容,这说明了 innerHTML
可以作为其 value
值?
是这样的吗?继续看下去:
<textarea cols="20" rows="5"><i>斜体</i></textarea>
var mt = document.getElementById('mt');
mt.innerHTML; //"&lt;i&gt;标题&lt;/i&gt;"
mt.innerHTML = 'heiheihei';
mt.value;// "heiheihei" //恩,value值确实改变了
mt.value = 'yoyoyo'; //改变其 value
mt.innerHTML;//"heiheihei" //改变 value 值,并不会使得innerHTML改变
mt.innerHTML = 'zezeze'; //再次改变 innerHTML ,看看 value 会不会变
mt.value; //"yoyoyo" value值并不会改变
结论
如果你有耐心把上面的连锁操作看完,相信你对我要解释的东西已然明白。
简单地说来,在 textarea
内的 innerHTML
是字符串;在我们没有对textarea
的 value
属性进行操作之前,如果你对 textarea
赋予了 innerHTML
(字符串值),那么 textarea
就拥有了一个起始状态的默认期望 value
值,并且可以通过 value
属性(或者 innerHTML
操作)来获取。不过,当你对 value
属性进行更改后(包括在文本域内的更改),innerHTML
作为一个初始期望值,就不会再起作用了。