先看个例子
<!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); // <div>我是textarea的内容!</div>
console.log(obj.value); // <div>我是textarea的内容!</div>
console.log('======开始采用value修改textarea内容=======');
obj.value = '<div>我是以value方式赋值的内容!</div>';
console.log(obj.innerHTML); // <div>我是textarea的内容!</div>
console.log(obj.value); // <div>我是以value方式赋值的内容!</div>
console.log('======开始采用innerHTML修改textarea内容=======');
obj.innerHTML = '<div>我是以innerHTML方式赋值的内容!</div>';
console.log(obj.innerHTML); // <div>我是以innerHTML方式赋值的内容!</div>
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属性上面;