textarea的value与innerHTML

textarea的value与innerHTML

看似很简但,但是却有其他问题:

<textarea cols="20" rows="5"><i>斜体</i></textarea>

这是什么?
textarea 里的 i 真是一个“斜体”吗?结果你应该能猜到,它不可能是一级标题。
在 textarea中的所有字符,都会被当作是“字符串值”,也就是说 “”只是 '<'+'i'+'>' 的一个字符串, textarea内不可能存在其他标签。到这里,你甚至可能就会有个疑问了,为什么 textarea是一个双标签?在标签内写入字符串有什么用?
我们可以试验以下代码:

<textarea cols="20" rows="5"><i>斜体</i></textarea>
<script>
    document.getElementById('mt').innerHTML; // "&lt;i&gt;斜体&lt;/i&gt;"
    document.getElementById('mt').value; // "<i>斜体</i>"
</script>

有趣的是,在读取 innerHTML 的时候,尖括号字符都被变为转义字符,而且我们尝试去读其 value 值时,竟然可以完整读取里面的内容,这说明了 innerHTML 可以作为其 value 值?
是这样的吗?继续看下去:

<script>
    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值并不会改变
</script>

有趣的是,在读取 innerHTML 的时候,尖括号字符都被变为转义字符,而且我们尝试去读其 value 值时,竟然可以完整读取里面的内容,这说明了 innerHTML 可以作为其 value 值?
是这样的吗?继续看下去:

<script>
    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值并不会改变
</script>

结论
如果你有耐心把上面的连锁操作看完,相信你对我要解释的东西已然明白。
简单地说来,在 textarea内的 innerHTML 是字符串;在我们没有对textarea的 value 属性进行操作之前,如果你对 textarea 赋予了 innerHTML (字符串值),那么 textarea就拥有了一个起始状态的默认期望 value 值,并且可以通过 value 属性(或者 innerHTML 操作)来获取。不过,当你对 value 属性进行更改后(包括在文本域内的更改),innerHTML 作为一个初始期望值,就不会再起作用了。

上一篇:Bootstrap CSS入门初步学习---排版


下一篇:Java调用GDAL读取指定点附近指定距离方格内的栅格像元值