textarea默认值怎么设置？js实现方法超详解
在前端开发的表单场景中，textarea（多行文本框）是高频组件——无论是用户评论框、内容编辑区还是反馈表单，都需要默认值提升交互体验。比如电商售后的问题描述框，默认显示“请简要描述您的问题（如商品质量、物流问题等）”；内容平台的草稿区，默认加载上次编辑的未保存内容。若默认值设置不当，不仅会增加用户操作成本，还可能引发表单提交错误。今天就来拆解textarea默认值的设置逻辑，重点讲解JS实现方法。
原生HTML的默认值设置（基础场景）
最基础的默认值设置无需JS，直接通过HTML的textarea标签内容实现。textarea是双标签元素，与input（单标签）不同，它的默认值需要写在<textarea>和</textarea>之间。 示例代码： <textarea rows="3" cols="30" placeholder="请输入内容">这是默认的文本内容</textarea> 注意事项：标签内的内容会被解析为纯文本，若包含HTML标签（如`<p>`），会直接显示为文本而非渲染标签；同时要避免标签内有多余空格或换行，否则会导致默认值出现不必要的空白。这种方法适用于固定不变的默认值，如提示文案、静态预设内容。
JS实现动态默认值（进阶场景）
当默认值需要动态变化时（如根据用户身份加载个性化内容、从接口获取历史数据），就需要用JS实现。常见的JS设置方式有两种：
方式1：修改value属性
这是最常用的方法，通过获取textarea元素的DOM对象，直接修改其value属性。 示例代码： <textarea id="myTextarea" rows="3" cols="30"></textarea> <script> // 获取DOM元素 const textarea = document.getElementById('myTextarea'); // 设置动态默认值（比如从接口获取的内容、用户本地存储的草稿） const dynamicValue = "欢迎回来，上次您编辑的内容是：如何提升网站加载速度？"; textarea.value = dynamicValue; </script> 这种方法的优势是操作简单，且不会受HTML标签内容的影响，适合动态加载内容的场景。
方式2：修改innerHTML属性
也可以通过修改textarea的innerHTML属性来设置默认值，本质是修改标签内的内容。 示例代码： <textarea id="myTextarea" rows="3" cols="30"></textarea> <script> const textarea = document.getElementById('myTextarea'); const defaultValue = "这是通过innerHTML设置的默认值"; textarea.innerHTML = defaultValue; </script> 但需要注意：若后续需要获取textarea的内容，innerHTML的优先级低于value属性（比如用户修改内容后，innerHTML不会同步更新），因此不推荐作为主流方法，仅适合特殊场景下的初始化。
避免JS设置的常见坑点
用JS设置默认值时，容易遇到两个问题：一是设置时机过早，DOM元素未加载完成导致获取失败，解决方案是将JS代码放在DOM加载完成后执行（如放在window.onload事件中，或把script标签放在body底部）；二是转义特殊字符，若默认值包含双引号、反斜杠等特殊字符，需提前转义，避免引发语法错误。
相关问题解答
1. 问：textarea默认值和placeholder有什么区别？ 答：默认值是textarea的初始内容，用户可以直接编辑或删除，表单提交时会包含该内容；placeholder是占位提示文字，仅在文本框为空时显示，不会被提交。
2. 问：JS设置的默认值如何清空？ 答：可以通过JS将textarea的value属性设为空字符串，代码为`document.getElementById('myTextarea').value = '';`。
3. 问：Vue/React中如何设置textarea默认值？ 答：Vue中可直接在双标签内写默认值，或通过v-model绑定初始数据；React中需通过value属性绑定状态（注意要配合onChange事件处理用户输入）。
