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>