textarea的value和innerHTML
本文由 小茗同学 发表于 2016-07-13 浏览(1741)
最后修改 2016-07-14 标签:html javascript textarea value innerhtml

先看个例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>测试textarea</title>
    <style type="text/css">
    #textarea {width: 400px; height: 200px;}
    </style>
</head>
<body>
    <textarea id="textarea"><div>我是textarea的内容!</div></textarea>
    <textarea id="textarea2" value="进口量范德萨">够的发生地方</textarea>
    <script type="text/javascript">
    var obj = document.getElementById('textarea');
    console.log(obj.innerHTML); // &lt;div&gt;我是textarea的内容!&lt;/div&gt;
    console.log(obj.value); // <div>我是textarea的内容!</div>

    console.log('======开始采用value修改textarea内容=======');
    obj.value = '<div>我是以value方式赋值的内容!</div>';
    console.log(obj.innerHTML); // &lt;div&gt;我是textarea的内容!&lt;/div&gt;
    console.log(obj.value); // <div>我是以value方式赋值的内容!</div>

    console.log('======开始采用innerHTML修改textarea内容=======');
    obj.innerHTML = '<div>我是以innerHTML方式赋值的内容!</div>';
    console.log(obj.innerHTML); // &lt;div&gt;我是以innerHTML方式赋值的内容!&lt;/div&gt;
    console.log(obj.value); // <div>我是以value方式赋值的内容!</div>
    console.log(document.getElementById('textarea2').value); // 够的发生地方
    </script>
</body>
</html>

总结

textarea的value和innerHTML总结:

  • innerHTML仅在textarea初始化的时候对value有影响,value的内容就是从innerHTML来的;
  • 除此之外,innerHTML和value没有任何关系,修改value不影响innerHTML,修改innerHTML不影响value;
  • 界面上呈现的永远是value的值,而不是innerHTML,比如通过代码修改innerHTML之后,界面上textarea里面的内容还是value的值;
  • 获取文本框的内容 自始至终都应该读取value
  • value获取的是原始内容,innerHTML获取的内容会自动将<>这2个符号转义;
  • 初始化textarea的内容只能写在<textarea></textarea>的中间,不能像input那样写在value属性上面;