vue开发常用css,js 篇2(持续更新)

vue开发常用css,js 篇1已完结了,总共有37个知识点,有需要的小伙伴可以点击链接跳转过去

目录标题

      • [1、contenteditable 属性的标签中获取光标的位置](#1、contenteditable 属性的标签中获取光标的位置)

1、contenteditable 属性的标签中获取光标的位置

篇1中第37个点,也是实现这个问题,但是比较复杂,所以优化迭代了一版,现在一起来看看吧

直接获取 innerHtml 中range.startContainer.data 的位置 ,加上startOffset 的位置即可获取位置

javascript 复制代码
export function getCursorPosition(domId) {
  var cursorPos = 0;
  var selection = window.getSelection();
  const el = document.getElementById(domId);
  let htmlChars = el.innerHTML;
  cursorPos = selection.focusOffset;
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    let pos = htmlChars.indexOf(range.startContainer.data);
    cursorPos = pos + range.startOffset;
  }
  console.log("光标位置:", cursorPos);
  return splitHtmlStringAtPosition(el.innerHTML, cursorPos);
}
export function splitHtmlStringAtPosition(inputString, position) {
  return [inputString.slice(0, position), inputString.slice(position)];
}
相关推荐
吃饭睡觉打豆豆嘛2 分钟前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
Spider_Man9 分钟前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮9 分钟前
最全Scss语法,赶紧收藏起来吧
前端·css
小高00710 分钟前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon23 分钟前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible40 分钟前
终止异步操作
前端·javascript·vue.js
Stringzhua1 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12041 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy1 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
Bling_Bling_12 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript