js实现可编辑的div，并在光标处插入元素

最新推荐文章于 2024-06-05 09:48:59 发布

梁梁LYQF

最新推荐文章于 2024-06-05 09:48:59 发布

阅读量6.7k

点赞数 14

分类专栏：前呀那个端文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_44817017/article/details/115321425

版权

前呀那个端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js实现可编辑的div，并在光标处插入元素

定义一个可以编辑的div，用户可以输入内容，并根据需要在光标处插入HTML元素或文本内容。并且实现placeholder的效果

一、可编辑的div 和 placeholder效果

关键点：contenteditable属性

标签的contenteditable属性可以设置元素内容是否可以编辑，属性值为true，可以编辑

<div
  id="inputContent"
  class="edit"
  placeholder="请在这输入内容"
  contenteditable="true"
  onblur="blurEdit"
  onfocus="focusEdit"
  oninput="changeText"></div>

此时placeholder是不生效的，要实现此效果需要进行样式设置。

.edit[contenteditable]:empty:before {
  content: attr(placeholder);
  color: #cccccc;
}
.edit[contenteditable]:focus {
  content: none;
}

效果如下：
在这里插入图片描述

二、在光标位置插入元素

1. 获取div输入的内容

关键点：innerText 获取元素内的文本内容
如果需要在失去焦点时获取输入的内容，则监听blur事件： οnblur=“blurEdit”

// 失去焦点时获取
function blurEdit(){
  let inputText = document.getELementById('inputContent').innerText
}

2.在光标位置插入按钮

关键点：window.getSelection().getRangeAt(0) 获取光标位置
在这里插入图片描述
在div内输入内容后，点击按钮，会在div的光标处插入一个按钮。
思路：在div失去焦点时，获取光标的位置，点击按钮时在该位置插入一个节点。

<body>
  <div
    class="edit"
    id="inputContent"
    contenteditable="true"
    placeholder="请在这输入内容" 
    onblur="blurEdit()"></div>
  <button onclick="clickInsert()">点击插入一个按钮</button>
</body>

<script>
let position = ''
function blurEdit() {
  position = window.getSelection().getRangeAt(0)
}
function clickInsert() {
  if(position === ''){
    // 如果div没有光标，则在div内容末尾插入
    const div = document.getElementById('inputContent')
    div.focus()
    const range = window.getSelection()
    range.selectAllChildren(div)
    range.collapseToEnd()
    position = window.getSelection().getRangeAt(0)
  }
  // 创建一个元素
  const span = document.createElement('span')
  // 插入的按钮不可编辑，设置contenteditable为false
  span.innerHTML = '<button contenteditable="false" class="btn" id="btn1">插入的按钮1</button>'
  // 将按钮插入
  position.insertNode(span)
}
</script>

实例：在div中输入内容，将鼠标移到某位置，然后点击按钮，将会在该位置插入一个按钮。
在这里插入图片描述
点击

梁梁LYQF

关注

14
点赞
踩
34

收藏

觉得还不错? 一键收藏
5
评论
js实现可编辑的div，并在光标处插入元素

js实现可编辑的div，并在光标处插入元素定义一个可以编辑的div，用户可以输入内容，并根据需要在光标处插入HTML元素或文本内容。并且实现placeholder的效果文章目录js实现可编辑的div，并在光标处插入元素一、可编辑的div 和 placeholder效果二、在光标位置插入元素1. 获取div输入的内容2.在光标位置插入按钮一、可编辑的div 和 placeholder效果关键点：contenteditable属性标签的contenteditable属性可以设置元素内容是否
复制链接

扫一扫

专栏目录