如何给textarea文本框动态填充内容？
你盯着屏幕上那个空白的文本框发愁了吗？明明在教程里看到别人轻松几行代码就能让文本框自动显示内容，为什么自己试了十几次还是没反应？别慌，今天咱们就掰开揉碎了讲明白这件事——其实给textarea赋值的方法，比你想象中简单得多。
咱们先来看最原始的办法。假设你在网页里写了这么一个文本框： “`html
这时候你打开浏览器，文本框就像刚买的新本子一样干净。想让这个本子自动写上字，最直接的办法就是找到它的身份证——也就是id属性。在JavaScript里，你可以这样操作：javascript document.getElementById(‘myText’).value = ‘早上好！今天记得吃早餐’; “` 对，就是这么简单粗暴。关键点在于必须用.value属性而不是.innerHTML。很多新手在这里栽跟头，总想着用innerHTML去塞内容，结果发现文本框死活不显示文字。这是因为textarea元素的内容存储机制比较特殊，它不像普通div那样通过innerHTML存储内容。
要是你正在用jQuery呢？方法就更简单了： javascript $(‘#myText’).val(‘下午茶时间到，来杯咖啡吗？’); 注意这里的val()方法专门用来处理表单元素的值。不过现在都2023年了，建议新手还是先掌握原生JavaScript的操作方法，毕竟现在前端框架满天飞，打好基础最重要。
这时候你可能会问：如果我要动态创建textarea元素怎么办？比如点击按钮才生成文本框。这时候就需要用到DOM操作了： javascript var newTextarea = document.createElement(‘textarea’); newTextarea.value = ‘这是新创建的文本框’; document.body.appendChild(newTextarea); 记住一定要先设置value再把这个元素添加到页面上，顺序搞反了可能会出问题。有些浏览器在元素还没插入DOM树的时候，设置value会不生效。
说到这，不得不提一个隐藏的坑。假设你的页面里有表单重置按钮，用户点了重置之后，所有表单元素都会恢复初始状态。这时候你预先设置的value值都会被清空。解决办法是在DOM加载完成后才执行赋值操作，或者直接写在页面底部： “`html
document.getElementById(‘myText’).value = ‘这段内容不会被重置按钮影响’;“` 看到这里，你应该发现了几个关键点：找准元素、用对属性、注意执行时机。这三个要点就像玩俄罗斯方块，少一个都叠不整齐。
那什么时候该用innerHTML呢？其实textarea有个冷门用法——通过文本节点赋值。虽然99%的情况下不推荐这么做，但了解下也没坏处： javascript var textarea = document.getElementById(‘myText’); textarea.innerHTML = ‘<em>斜体字</em>’; // 这招不管用！ textarea.appendChild(document.createTextNode(‘这才是正确姿势’)); 你会发现用innerHTML插入的内容根本不会渲染成文本，而是原样显示标签。这说明浏览器处理textarea内容时有特殊的解析规则，所有HTML标签在里面都会变成纯文本显示。
最后说个实战技巧。现在很多网页需要实时保存用户输入的内容，这时候可以用事件监听配合赋值操作： javascript var autoSave = function(){ var content = document.getElementById(‘myText’).value; localStorage.setItem(‘draft’, content); }; document.getElementById(‘myText’).addEventListener(‘input’, autoSave); 这个例子不仅能自动保存，还能在页面刷新后恢复内容： javascript window.onload = function(){ var saved = localStorage.getItem(‘draft’); if(saved) document.getElementById(‘myText’).value = saved; }; 说到底，给textarea赋值就像往杯子里倒水，关键要找准杯口的位置。用原生JS就认准.value属性，用框架就查对应文档，遇到问题先检查元素是否真的存在页面上。多试几次你会发现，原来困扰自己好几天的问题，解决方法可能就藏在某一行简单的代码里。
相关文章：
相关推荐：