contenteditable=“true“ ---->window.getSelection() 获取光标位置 & 光标位置插入内容

//光标位置插入 content
var insertContent = function (content) {
  if (content) {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
      var range = sel.getRangeAt(0); //获取选择范围
      range.deleteContents(); //删除选中的内容
      var el = document.createElement("div"); //创建一个空的div外壳
      el.innerHTML = content; //设置div内容为我们想要插入的内容。
      var frag = document.createDocumentFragment(); //创建一个空白的文档片段,便于之后插入dom树
      var node = el.firstChild;
      var lastNode = frag.appendChild(node);
      range.insertNode(frag); //设置选择范围的内容为插入的内容
      var contentRange = range.cloneRange(); //克隆选区
      contentRange.setStartAfter(lastNode); //设置光标位置为插入内容的末尾
      contentRange.collapse(true); //移动光标位置到末尾
      sel.removeAllRanges(); //移出所有选区
      sel.addRange(contentRange); //添加修改后的选区
    }
  }
};

//调用 
insertContent("<span>ddd</span>") or  insertContent("ddd")

获取光标位置
var getPosition = function (elem
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值