html之textarea标签的innerHTML属性和value属性获取值的区别

注意： html中textarea标签的innerHTML属性和value属性获取值是不一致的！示例代码如下：<html><body><textarea rows="10" cols="20" id="my">AAA</textarea><button onClick="test()">test</button...

程序yang

855人浏览 · 2019-10-18 09:15:32

程序yang · 2019-10-18 09:15:32 发布

注意： html中textarea标签的innerHTML属性和value属性获取值是不一致的！
innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的 HTML。
示例代码如下：

<html>
<body>
 
<textarea rows="10" cols="20" id="my">
AAA
</textarea>
 
<button onClick="test()">test</button>
 
<script>
	function test(){
	   var obj = document.getElementById("my");
	   alert("我是value："+obj.value);
	   alert("我是innerHTML："+obj.innerHTML);	 
	}
</script>
 
</body>
</html>

此时，我们在输入框内继续追加输入内容，例如：输入BBB, 然后点击按钮就可以看到， value输出的是AAABBB，而innerHTML输出的是AAA，可见含义不一致。取值的话，建议使用value。
效果图：
在这里插入图片描述

PS：以下是innerHTML的小练习代码

<html>
</head>
<script>
	function inter(){
		var inter = document.getElementById("inner");
		if(inter.innerHTML==""){        
			inter.innerHTML="显示的文字";    
		}else{       
			inter.innerHTML=""
		}
	}
</script>
</head>
<body>
	<input type="button" value="点击添加文字" onclick="inter()">
	<div id='inner'></div>
</body>
</html>