react 获取input光标

881 阅读1分钟


/**
 * 获取输入框光标位置
 * @param {*} textarea
 * @returns
 */
export const getCursorPosition = textarea => {
  let rangeData = { text: '', start: 0, end: 0 }

  if (textarea.setSelectionRange) {
    // W3C
    rangeData.start = textarea.selectionStart
    rangeData.end = textarea.selectionEnd
    rangeData.text = rangeData.start != rangeData.end ? textarea.value.substring(rangeData.start, rangeData.end) : ''
  } else if (document.selection) {
    // IE
    let i,
      oS = document.selection.createRange(),
      // Don't: oR = textarea.createTextRange()
      oR = document.body.createTextRange()
    oR.moveToElementText(textarea)

    rangeData.text = oS.text
    rangeData.bookmark = oS.getBookmark()

    // Return Value: Integer that returns the number of units moved.
    for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart('character', -1) !== 0; i++) {
      // Why? You can alert(textarea.value.length)
      if (textarea.value.charAt(i) == '\n') {
        // eslint-disable-next-line no-plusplus
        i++
      }
    }
    rangeData.start = i
    rangeData.end = rangeData.text.length + rangeData.start
  }

  return rangeData
}



var a = document.getElementById('test')
a.addEventListener('click'(e)=>{
        console.log(getCursorPosition(a))
})