js选中文字和获取光标的几种经常使用方法

Selection和Range的文档

纯文本文字选中

效果

代码

<div id="range-div">我是纯文本文字,咿呀咿呀呦</div>
  <div onclick="textPitch()" class="btn">获取我丢失的选中</div>

  <script>
    // 选中的位置
    var position = {}
    // 鼠标松开事件(鼠标松开的时候就获取当前选中的selection)
    document.onmouseup = function (e) {
      var selection = document.getSelection()
      var selectionText = selection.toString()
      if (selectionText) {
        position.anchorOffset = selection.anchorOffset
        position.focusOffset = selection.focusOffset
      }
    }
    // 选中以前勾选的文字(纯文本)
    function textPitch() {
      var selection = document.getSelection()
      var range = document.createRange()
      var rangeDivDom = document.querySelector('#range-div')
      var rangeText = rangeDivDom.firstChild
      range.setStart(rangeText, position.anchorOffset)
      range.setEnd(rangeText, position.focusOffset)
      selection.removeAllRanges()
      selection.addRange(range)
    }
  </script>
复制代码

textarea中的文字选中(也能够用于定位光标)

效果

代码

<div>
    <textarea id="range-textarea" rows="5">
      我是文本域文字,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀,咿呀咿呀呦
    </textarea>
  </div>
  <div onclick="textareaPitch()" class="btn">获取我丢失的选中</div>

  <script>
    // 选中的位置
    var position = {}
    // 鼠标松开事件(鼠标松开的时候就获取当前选中的select)
    document.onmouseup = function (e) {
      var rangeTextareaDom = document.querySelector('#range-textarea')
      position.start = rangeTextareaDom.selectionStart
      position.end = rangeTextareaDom.selectionEnd
    }
    // 选中以前勾选的文字(textarea)
    function textareaPitch() {
      var rangeTextareaDom = document.querySelector('#range-textarea')
      rangeTextareaDom.focus()
      rangeTextareaDom.setSelectionRange(position.start, position.end)
    }
  </script>
复制代码

selectionStart和setSelectionRange的文档

节点选中

效果

代码

<div id="rang-node">
    <div style="border-bottom:1px solid black;">我是div1</div>
    <div style="border-bottom:1px solid black;">我是div2</div>
    <div style="border-bottom:1px solid black;">我是div3</div>
  </div>
  <div onclick="nodePitch()" class="btn">选中全部节点</div>

  <script>
    // 选中全部节点
    function nodePitch() {
      const selection = document.getSelection()
      const range = document.createRange()
      var rangeNodeDom = document.querySelector('#rang-node')
      range.selectNode(rangeNodeDom)
      selection.removeAllRanges()
      selection.addRange(range)
    }
  </script>
复制代码

文本节点定位光标

效果

代码

<div id="range-div" contenteditable>
    我是添加了contenteditable属性的文本节点文字,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀,咿呀咿呀呦
  </div>
  <div onclick="cursorPitch()" class="btn">定位我丢失的光标</div>

  <script>
    // 最后一次的range对象
    var lastRange = null
    // 编辑框dom
    var rangeDivDom = document.querySelector('#range-div')
    // 编辑框点击事件
    rangeDivDom.onclick = function (e) {
      var selection = document.getSelection()
      // 保存最后的range对象
      lastRange = selection.getRangeAt(0)
    }
    // 编辑框键盘按键松开事件
    rangeDivDom.onkeyup = function (e) {
      var selection = document.getSelection()
      // 保存最后的range对象
      lastRange = selection.getRangeAt(0)
    }
    // 定位光标
    function cursorPitch() {
      var selection = document.getSelection()
      selection.removeAllRanges()
      selection.addRange(lastRange)
    }
  </script>
复制代码

文本节点在指定光标位置插入内容

效果

代码

<div id="range-div" contenteditable>
    我是添加了contenteditable属性的文本节点文字,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀,咿呀咿呀呦
  </div>
  <div>
    <input id="insert-input" type="text">
  </div>
  <div onclick="insertText()" class="btn">插入内容</div>

  <script>
    // 最后一次的range对象
    var lastRange = null
    // 编辑框dom
    var rangeDivDom = document.querySelector('#range-div')
    // 编辑框点击事件
    rangeDivDom.onclick = function (e) {
      var selection = document.getSelection()
      // 保存最后的range对象
      lastRange = selection.getRangeAt(0)
    }
    // 编辑框键盘按键松开事件
    rangeDivDom.onkeyup = function (e) {
      var selection = document.getSelection()
      // 保存最后的range对象
      lastRange = selection.getRangeAt(0)
    }
    // 插入内容
    function insertText() {
      var selection = document.getSelection()
      selection.removeAllRanges()
      selection.addRange(lastRange)
      var range = selection.getRangeAt(0)
      var textNode = range.startContainer
      var startOffset = range.startOffset
      var insertValue = document.querySelector('#insert-input').value
      textNode.insertData(startOffset, insertValue)
      range.setStart(textNode, startOffset + insertValue.length)
      selection.addRange(range)
    }
  </script>
复制代码

文本节点获取光标的坐标位置

效果

代码

<div id="range-div" oninput="textInput()" contenteditable></div>
  <div id="tooltip" style="position: fixed;border:1px solid red;"></div>

  <script>
    // 输入事件
    function textInput() {
      var selection = document.getSelection()
      var range = selection.getRangeAt(0)
      var rect = range.getBoundingClientRect()
      var tooltipDom = document.querySelector('#tooltip')
      tooltipDom.style.top = rect.y + 'px'
      tooltipDom.style.left = rect.x + 'px'
      tooltipDom.textContent = 'x坐标:' + rect.x + ' y坐标:' + rect.y
    }
  </script>
复制代码

textarea在指定光标位置插入内容

效果

代码

<div>
    <textarea id="range-textarea" rows="5">
      我是文本域文字,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀呦,咿呀咿呀
    </textarea>
  </div>
  <div>
    <input id="insert-input" type="text">
  </div>
  <div onclick="insertText()" class="btn">插入内容</div>

  <script>
    // 选中的位置
    var position = {}
    // 鼠标松开事件(鼠标松开的时候就获取当前选中的select)
    document.onmouseup = function (e) {
      var rangeTextareaDom = document.querySelector('#range-textarea')
      position.start = rangeTextareaDom.selectionStart
      position.end = rangeTextareaDom.selectionEnd
    }
    // 插入内容
    function insertText() {
      var rangeTextareaDom = document.querySelector('#range-textarea')
      var insertValue = document.querySelector('#insert-input').value
      rangeTextareaDom.setRangeText(insertValue, position.start, position.end)
      rangeTextareaDom.focus()
      var start = position.start + insertValue.length
      rangeTextareaDom.setSelectionRange(start, start)
    }
  </script>
复制代码

textarea获取光标的坐标位置

貌似textarea中没办法获取range对象，就拿不到坐标地址，找插件搞吧