jquery textarea中val()和text()在各个浏览器下的不同解释
从网上摘抄了一段html和js的代码,这个代码在各个浏览器下运行效果有些差异
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>
textarea</h3>
<div>
<textarea id="txt" cols="40" rows="5"></textarea></div>
<button onclick="alert('text:' + $('#txt').text() + '\n' + 'val:' + $('#txt').val() + '\n' + 'html:' + $('#txt').parent().html());">
获得textarea的text,val,html
</button>
<hr />
<button onclick="$('#txt').text('大家好,我是text');return false">
使用text赋值</button>
<button onclick="$('#txt').val('大家好,我是val');return false">
使用val赋值</button>
<hr />
<dl>
<dt>测试方法</dt>
<dd>
第一步:先在textarea中输入内容,并点击获得按钮
</dd>
<dd>
第二步:使用text赋值,并点击获得按钮
</dd>
<dd>
第三步:使用val赋值,并点击获得按钮
</dd>
</dl>
</body>
</html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<h3>
textarea</h3>
<div>
<textarea id="txt" cols="40" rows="5"></textarea></div>
<button onclick="alert('text:' + $('#txt').text() + '\n' + 'val:' + $('#txt').val() + '\n' + 'html:' + $('#txt').parent().html());">
获得textarea的text,val,html
</button>
<hr />
<button onclick="$('#txt').text('大家好,我是text');return false">
使用text赋值</button>
<button onclick="$('#txt').val('大家好,我是val');return false">
使用val赋值</button>
<hr />
<dl>
<dt>测试方法</dt>
<dd>
第一步:先在textarea中输入内容,并点击获得按钮
</dd>
<dd>
第二步:使用text赋值,并点击获得按钮
</dd>
<dd>
第三步:使用val赋值,并点击获得按钮
</dd>
</dl>
</body>
</html>
我测试了以上代码在以下4个浏览器中的效果:
1.IE8:无论输入、val还是text,jquery都能设置和获取textarea中的实际内容,这个比较符合我们想要的结果
2.Chorme:用户输入的内容在val中,设置text时,会同时设置val,设置val时,不影响text,innerhtml的内容同text
3.Firefox,Opear:这两个浏览器的效果相同,用户输入的内容在val中,设置text时,不影响val,设置val时,textarea的内容会改变,不影响text,innerhtml的内容同text
由于我的表达能力有限,大家可以多试几次这个代码,就会发现这个奇怪的现象
了解了这个规则,才能使自己的代码兼容各个浏览器