通过div的contenteditable属性实现textarea

最新推荐文章于 2024-07-26 15:05:55 发布

who_care?

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量127

点赞数 4

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_42989005/article/details/140153539

版权

通过给div添加 contenteditable属性实现div的可编辑状态

<div :contenteditable="true"
         class="textarea">
      <div>
        <span class="title">Name:</span>
        <span>summer</span>
      </div>
      <div>
        <span class="title">Name:</span>
        <span>summer</span>
      </div>
      <div>
        <span class="title">Name:</span>
        <span>summer</span>
      </div>
    </div>

通过样式控制div的缩放以及光标的控制

<style lang="less">
.textarea {
  margin-top: 30px;
  width: 500px;
  height: 500px;
  border: 1px solid pink;
  text-align: left;
  overflow: auto;
  resize: both; /* 可水平和垂直缩放 */
  white-space: pre-wrap; /* 保留空白符和换行符 */
  outline: none;
  &:focus {
    border: 1px solid #e00b60;
    box-shadow: 0 0 5px rgba(251, 4, 57, 0.6);
  }
  span {
    color: #f0f0f0;
  }
  .title {
    color: #999;
  }
}
</style>