html中textarea赋值与取值问题详细讲解|三体教程
文章目录

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>

<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>
亲自测试一下

上面的实例中,如果先点击val赋值,再点击html赋值,后者将不会有响应。

但是如果先点击html赋值则会正常运行,再点击val赋值也会正常运行。

因此小编最后得出的总结就是:

在jquery中使用val()和html()都可以对textarea取值。

在jquery中,对textarea赋值最好是使用val,不要使用html来赋值。

本文网址:http://www.santii.com/article/119.html


数据更新时间:2018-05-21