javaScript和jQuery获取、设置textarea标签的内容（常见问题）

本文介绍: 昨天晚上在写代码的时候前端遇到一个 bug，在js 取值 textarea中，我使用了getElem entById 方法对text a re a 标签取值，但不论如何取值，始终无法成功取到页面上输入的值并进行Aja x 请求，一开始以为是ajax与后端接口之间数据传输出问题了，后来经过排查，就是对于text a rea标签取值失败的问题，于是上网查阅了一下资料。下面是我的错误源码对于标签 textarea的取值，顺便整理一下它的取值和赋值。

javaSc rip t和jQue ry 获取、设置 textarea标签的内容（取值和赋值）

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

下面是我的错误源码

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"&gt;</textarea&gt;
<button id="btn"&gt;提交</button&gt;

javaSc ript 获取 text area 的值

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

js 代码如下：

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

jQue ry 获取 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

jQue ry不同方式下的取值也有所不同

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

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

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

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

总结：

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

代码段如下:



<!DOCTYPE html&gt;
<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>