首页 / 编程 jQuery获取textarea中的内容

jQuery获取textarea中的内容

原创 分类: 编程 2023-3-2 09:10 阅读量:2524
想使用jQuery获取textarea中的内容,.val()可以吗?只有这一种方式么...

查阅资料可知:

  1. jQuery的.val()方法是专门用来获取表单元素值的,而textarea也属于表单元素所以可以直接用.val()方法获取。

  2. 由于textarea是个双标记,因此.text()或.html()方法也可以获取到其中的信息。

经过我们实际的测试发现;

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>