javaScript和jQuery获取、设置textarea标签的内容（常见问题）
javaScript和jQuery获取、设置textarea标签的内容（取值和赋值）
昨天晚上在写代码的时候前端遇到一个bug，在js取值textarea中，我使用了getElementById方法对textarea标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Ajax请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于textarea标签取值失败的问题，于是上网查阅了一下资料。
下面是我的错误源码
function addComment(){
//后端需要参数 Integer postId,Comment comment,HttpSession httpSession
// 创建一个URLSearchParams对象并传入URL
var 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",
//session
xhrFields:{
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();//方法1
var info = $("#text").text();//方法2
var 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的内容。
总结：
- 通过jQuery获取textarea新输入的内容时，需要使用筛选器和.val()组合进行获取。（常用）
- 通过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: undefined
console.log("remark:",$("textarea[name=remark]").val()) // remark: 123456
console.log("remark:",$("textarea[name=remark]").text()) // remark: 1234
console.log("remark:",$("textarea[name=remark]").html()) // remark: 1234
}
</script>
</html>