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>

 

 

 

 我测试了以上代码在以下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

 

 由于我的表达能力有限,大家可以多试几次这个代码,就会发现这个奇怪的现象

了解了这个规则,才能使自己的代码兼容各个浏览器 

 

posted @ 2010-05-07 14:37  九道轮回  阅读(7707)  评论(0编辑  收藏  举报