html中textarea赋值与取值问题详细讲解
许多小伙伴在编程的时候,容易搞错一个问题,就是对textarea赋值。
因为第一感觉就是textarea和input一样,那么赋值当然就是vlaue了。
但是不是的,对textarea赋值,应该将内容放在<textarea>和</textarea>之间才对。
很显然,下面这样的方法是错误的。
<textarea name="content" id="content" value="这是一个textarea框"></textarea>
下面代码才是正确的给textarea赋值。
<textarea name="content" id="content"></textarea>
那么如何对textarea取值呢?
我们来看看下面的实例。
<form name="form1">
<textarea name="content" id="content">三体教程(santii.com)分享最全的编程技术,详细讲解HTML、CSS、Javascript、PHP、MySQL、Java、Python、Ajax等各类编程语言知识。更有大量在线实例及源码供您轻松掌握并学习编程。</textarea>
</form>
alert(content);
var content=document.getElementById("content").innerHTML;
亲自测试一下 <textarea name="content" id="content">三体教程(santii.com)分享最全的编程技术,详细讲解HTML、CSS、Javascript、PHP、MySQL、Java、Python、Ajax等各类编程语言知识。更有大量在线实例及源码供您轻松掌握并学习编程。</textarea>
</form>
<script>
//取值
var content=document.getElementById("content").value;alert(content);
var content=document.getElementById("content").innerHTML;
alert(content);
//赋值
document.getElementById("content").value='三体教程';
</script>可见不管是使用使用value还是innerHTML都能取到值,但是赋值只能使用value,不能使用innerHTML。
再来看看使用jquery获取textarea的值。
<form name="form1">
<textarea name="content" id="content">php教程</textarea>
<div>
<input type="button" id="qz1" value="使用val取值" />
<input type="button" id="qz2" value="使用html取值" />
</div>
<div>
<input type="button" id="fz1" value="使用val赋值" />
<input type="button" id="fz2" value="使用html赋值" />
</div>
</form>
<script>
//取值
$("#qz1").click(function(){
var content=$("#content").val();
alert(content);
});
$("#qz2").click(function(){
var content=$("#content").html();
alert(content);
});
//赋值
$("#fz1").click(function(){
$("#content").val("使用val赋值");
});
$("#fz2").click(function(){
$("#content").html("使用html赋值");
});
</script>
亲自测试一下 <textarea name="content" id="content">php教程</textarea>
<div>
<input type="button" id="qz1" value="使用val取值" />
<input type="button" id="qz2" value="使用html取值" />
</div>
<div>
<input type="button" id="fz1" value="使用val赋值" />
<input type="button" id="fz2" value="使用html赋值" />
</div>
</form>
<script>
//取值
$("#qz1").click(function(){
var content=$("#content").val();
alert(content);
});
$("#qz2").click(function(){
var content=$("#content").html();
alert(content);
});
//赋值
$("#fz1").click(function(){
$("#content").val("使用val赋值");
});
$("#fz2").click(function(){
$("#content").html("使用html赋值");
});
</script>
上面的实例中,如果先点击val赋值,再点击html赋值,后者将不会有响应。
但是如果先点击html赋值则会正常运行,再点击val赋值也会正常运行。
因此小编最后得出的总结就是:
在jquery中使用val()和html()都可以对textarea取值。
在jquery中,对textarea赋值最好是使用val,不要使用html来赋值。