div 仿功能健全的textArea，实现监听

最新推荐文章于 2023-07-26 15:06:09 发布

原创最新推荐文章于 2023-07-26 15:06:09 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #div #textarea #监听输入 #无图标

前端专栏收录该内容

46 篇文章

订阅专栏

该博客介绍了如何使用div元素代替textarea，通过设置contenteditable属性和添加data-text提示，实现一个无图标且功能齐全的文本输入区域，并讨论了如何进行输入监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为一直苦恼textarea右下角的小三角，觉得很丑，所以网上找资料自己写了一个div仿textarea的例子

以下为代码

1.将div的属性添加一个 contenteditable="true"

<div   contenteditable="true" ></div>

这样这个div就可以编辑了，在上面可以输入任意的字符

2.将div的属性再添加一个 data-text="这里是提示文字“

<div    contenteditable="true" data-text="关于本次校招你想知道什么？"></div>

还得添加一行css,用来模仿placeholder的功能

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-text);
}
嗒哒，这里已经实现了一个最普通又简介不带任何图标的textarea啦
3.实现js监听输入事件，在页面加载的时候添加这个监听方法
document.getElementById("yourdiv").addEventListener("DOMSubtreeModified", function(e) {
 // Listener the changes
 listener();//你的监听方法
}, false);
在 listener()里面你就可以对div的文字为所欲为了，
到此，大功告成，一个完美的textarea就新鲜出炉啦！