javaScript和jQuery獲取、設置textarea標簽的內容（取值和賦值）
昨天晚上在寫代碼的時候前端遇到一個bug，在js取值textarea中，我使用了getElementById方法對textarea標簽取值，但不論如何取值，始終無法成功取到頁面上輸入的值并進行Ajax請求，一開始以為是ajax與后端接口之間數據傳輸出問題了，后來經過排查，就是對于textarea標簽取值失敗的問題，于是上網查閱了一下資料。
下面是我的錯誤源碼
function addComment(){
//后端需要參數 Integer postId,Comment comment,HttpSession httpSession
// 創(chuàng)建一個URLSearchParams對象并傳入URL
var params = new URLSearchParams(window.location.search);
// 獲取id參數值
var id = params.get('id');
var commentDTO = {
//就是下面這行取值發(fā)生了錯誤
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的內容。文章來源：http://www.zghlxwxcb.cn/news/detail-753870.html
總結：
- 通過jQuery獲取textarea新輸入的內容時，需要使用篩選器和.val()組合進行獲取。（常用）
- 通過jQuery獲取textarea默認的內容時，需要使用篩選器和.text()組合進行獲取或使用篩選器和.html()組合進行獲取。
代碼段如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-753870.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>
到了這里，關于javaScript和jQuery獲取、設置textarea標簽的內容（常見問題）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
