textarea 文本域取值赋值使用val()还是text()

最新推荐文章于 2024-04-20 12:59:59 发布

qq_41484053

最新推荐文章于 2024-04-20 12:59:59 发布

阅读量2.1k

点赞数

文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_41484053/article/details/125701448

版权

1、如果用户修改或者输入过textarea输入框中的值或者使用val("值")赋过值，则text()获取不到textarea输入框中的内容，text("值")赋的值textarea输入框中不会显示，但是可以用text()获取到。
2、如果没有修改过textarea输入框中的值，textarea输入框中会显示text("值")赋的值，并且text()可以获取到textarea输入框中的值。

本质上val()获取的是textarea的value属性值，text()获取的是dom对象文字显示内容，
value优先级大于文字显示内容，用户在textarea输入框中输入修改，textarea输入框中会显示value值，虽然text还存在，但不会显示，想获取text值只能用text(),文本域的输入的内容还是得用val()获取。

感兴趣的朋友可以自己测试一下：

<textarea id="test">初始值</textarea><br>
<input type="button" id="getValBtn" value="点击获取value">
<input type="button" id="getTestBtn" value="点击获取text"><br>
<input type="button" id="setValBtn" value="点击赋value值">
<input type="button" id="setTestBtn" value="点击赋text值">
<input type="button" id="setTestBtn2" value="点击赋text值2">

<script type="text/javascript">
    $(function(){
        $("#getValBtn").click(function(){
		    alert($("#test").val());
	    });

	    $("#getTestBtn").click(function(){
		    alert($("#test").text());
	    });

	    $("#setValBtn").click(function(){
		    $("#test").val("给value赋值")
	    });

	    $("#setTestBtn").click(function(){
		    $("#test").text("给text赋值1");
	    });

	    $("#setTestBtn2").click(function(){
		    $("#test").text("给text赋值2");
	    });
    });
</script>