javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）

昨天晚上在写代码的时候前端遇到一个bug，在js取值textarea中，我使用了getElementById方法对textarea标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Ajax请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于textarea标签取值失败的问题，于是上网查阅了一下资料。

下面是我的错误源码

function addComment(){//后端需要参数 Integer postId,Comment comment,HttpSession httpSession// 创建一个URLSearchParams对象并传入URLvar params = new URLSearchParams(window.location.search);// 获取id参数值var id = params.get('id');var commentDTO = {//就是下面这行取值发生了错误text:document.getElementById("addComment"),};$.ajax({url:"http://localhost:8080/addComment/"+id,type:"POST",data: JSON.stringify(commentDTO),contentType:"application/json",//sessionxhrFields:{withCredentials:true},success:function (data){if (data.code===0){if (data.msg==="新增成功"){alert(data.msg);}else if (data.msg==="新增失败,请联系管理员查看原因"){alert(data.msg);}}else if (data.msg){alert(data.msg);}}})}

对于标签textarea 的取值，顺便整理一下它的取值和赋值。

HTML部分：

<textarea id="text" name="" id="" cols="30" rows="10"></textarea><button id="btn">提交</button>

javaScript 获取 textarea 的值

通过 element.value 和 element.innerHTML 获取， .value 亲测有效。

js 代码如下：

<script>var text = document.getElementById("text"),btn=document.getElementById("btn");btn.onclick = function () {var info = text.value;//方法一var info = text.innerHTML;//方法二console.log(info);}</script>

jQuery 获取 textarea 的值

textarea 是表单元素，所以 val() 可用；它又是闭合标签，所以 html() 和 text() 可用。

js 代码如下：

var info = $("#text").val();//方法1var info = $("#text").text();//方法2var iiinfo = $("#text").html();//方法3

textarea 的赋值

//javaScript赋值text.innerHTML = "你好，地球！";//方法一text.value = "你好，中国！";//方法二text.innerText = "绿色地球！";//方法三//jq赋值$("#text").html("你好、我好、大家好！");//方法1$("#text").val("幸福的日子");//方法2$("#text").text("html好学");//方法3

jQuery不同方式下的取值也有所不同

1.我们通过给textarea元素设置id，通过id查找到元素获取val的方式行不通。详情见代码。具体原因还未查找到，有了解的码友请指点一二。

2.通过jQuery的选择器查找到元素，通过.val()的方法可以获取到初始的textarea的内容，也可以获取到修改以后的textarea的内容。

3.通过jQuery的选择器查找到元素，通过.text()的方法只能获取到初始的textarea的内容。

4.通过jQuery的选择器查找到元素，通过.html()的方法只能获取到初始的textarea的内容。

总结：

  1. 通过jQuery获取textarea新输入的内容时，需要使用筛选器和.val()组合进行获取。（常用）
  2. 通过jQuery获取textarea默认的内容时，需要使用筛选器和.text()组合进行获取或使用筛选器和.html()组合进行获取。

代码段如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取textarea内容</title></head><body><div class="title"><span class="xinghao">*</span>内容描述</div><textarea name="remark" id="remark" rows="8" placeholder="请您输入作品概述" class="content">123456</textarea><div class="btn-container" onclick="onSubmte()">获取textArea内容</div></body><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>function onSubmte() {console.log("remark:", $("#remark").val()) //remark: undefinedconsole.log("remark:",$("textarea[name=remark]").val()) // remark: 123456console.log("remark:",$("textarea[name=remark]").text()) // remark: 1234console.log("remark:",$("textarea[name=remark]").html()) // remark: 1234}</script></html>