首页 前端知识 javaScript和jQuery获取、设置textarea标签的内容(常见问题)

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

2024-02-05 11:02:24 前端知识 前端哥 67 689 我要收藏

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.valueelement.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的内容。

总结:

  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: 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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1402.html
标签
开发语言
评论
会员中心 联系我 留言建议 回顶部
复制成功!