jquery textarea中val()和text()在各个浏览器下的不同解释
从网上摘抄了一段html和js的代码，这个代码在各个浏览器下运行效果有些差异
示例代码<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
由于我的表达能力有限，大家可以多试几次这个代码，就会发现这个奇怪的现象
了解了这个规则，才能使自己的代码兼容各个浏览器
浙公网安备 33010602011771号