textarea的value与innerHTML


问题的来由

今天有一位朋友问到关于 textarea标签的问题,开始时我不以为意。因为在我看来,因为这是一个很简单的标签,它表示一个可增删字符的文本域,可以利用 textareaplaceholdervalue 属性来做一些适当的操作;用 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 是字符串;在我们没有对textareavalue 属性进行操作之前,如果你对 textarea 赋予了 innerHTML (字符串值),那么 textarea就拥有了一个起始状态的默认期望 value 值,并且可以通过 value 属性(或者 innerHTML 操作)来获取。不过,当你对 value 属性进行更改后(包括在文本域内的更改),innerHTML 作为一个初始期望值,就不会再起作用了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,359评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,082评论 19 139
  • 一、什么是创始人精神 克里斯·祖克和詹姆斯·艾伦认为,创始人精神作为企业创始者在公司初创时期的正确方略,一般有三个...
    平行夏阅读 461评论 0 0
  • 这几天在想毕业论文的内容怎么整。虽然文章发表要求已经满足了,但是学位论文的内容仍然不够丰富。要加新内容的话,需要学...
    lxt阅读 232评论 0 1
  • 我有幸参加了二0一七年暑假心理咨询师的培训,这几天大概是入夏以来最热的几天了,天气虽热却依然阻挡不了大家学...
    木子accd阅读 203评论 0 0