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對象，就拿不到座標地址，找插件搞吧