在前端开发中，如何用一个div模拟textarea？

4 min read

可以使用contentEditable属性来实现类似于textarea的div，具体方法如下：

HTML部分：

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

CSS部分：

#textarea {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
}

JS部分：

var textarea = document.getElementById("textarea");
textarea.addEventListener("input", function() {
  // 处理用户输入
  console.log(textarea.innerHTML);
});

该方法中使用了contentEditable属性使该div可编辑，同时设置了一些基本的边框、内边距和最小高度等样式。通过JS监听该div的input事件可以实时获取用户的输入，进而进行处理。