input 获取光标位置与设置光标位置

需求

输入框，支持键盘输入与快捷按键 输入，UI 如下「基于antd」：

关键点：键盘输入直接使用 input onChange 事件即可，快捷按键输入需要根据光标位置插入，插入后光标在新插入的字符后。

解决方案

获取 input 光标位置

通过 element.selectionStart 获取光标位置。

const inputDom = document.getElementById("input")
const selectionStart = inputDom.selectionStart

如图，此时的 selectionStart 是 3。

设置 input 光标

通过 element.setSelectionRange() 设置光标位置，前提是 input 被 focus。

inputDom.focus()
// focus() 异步，所以加了 setTimeout
setTimeout(() => {
  const nextSelection = selectionStart + 1
  inputDom.setSelectionRange(nextSelection, nextSelection)
}, 0)

element.setSelectionRange 语法

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);

• selectionStart: 被选中的第一个字符的位置索引, 从 0 开始。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
• selectionEnd: 被选中的最后一个字符的下一个位置索引。如果这个值比元素的 value 长度还大，则会被看作 value 最后一个位置的索引。
• selectionDirection：选择方向。forward/backward/none

如果 selectionStart 与 selectionEnd 相同，不选中任何，光标聚集在 selectionStart/selectionEnd。

如果 selectionEnd 小于 selectionStart，不选中任何，光标聚集在在 selectionEnd。

inputDom.setSelectionRange(0, 4)表现如下图：

完整代码

import React, { useState, useRef } from 'react'
import { throttle } from 'lodash'
import { Input, Button, Tag } from 'antd'

const SHORTCUT = [0, '*', '#', 9]

const InputPro = () => {
  const [value, setValue] = useState('')
  const inputRef = useRef()

  const handleSubmit = throttle(() => {
    console.log('value', value)
  }, 3000)

  const handleInputChange = e => {
    setValue(e.target.value?.trim())
  }

  const handleTagChange = val => {
    const inputDom = inputRef.current?.input || {}
    let selectionStart = inputDom.selectionStart
    if (typeof selectionStart !== 'number') {
      selectionStart = value.length
    }
    const data = `${value.slice(
      0,
      selectionStart,
    )}${val}${value.slice(selectionStart)}`
    if (data.length <= 25) {
      setValue(data)
      inputDom.focus()
      setTimeout(() => {
        const nextSelection = selectionStart + 1
        inputDom.setSelectionRange(nextSelection, nextSelection)
      }, 0)
    }
  }

  return (
    <div>
      <Input.Group compact>
        <Input
          allowClear
          style={{ width: 160 }}
          maxLength={25}
          placeholder='请输入'
          value={value}
          onChange={handleInputChange}
          ref={inputRef}
        />
        <Button
          type='primary'
          onClick={handleSubmit}
          disabled={value.length === 0}
        >
          确认
        </Button>
      </Input.Group>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: 8 }}>
        {SHORTCUT.map(itm => (
          <div key={itm} onClick={() => handleTagChange(itm)}>
            <Tag color="#108ee9">{itm}</Tag>
          </div>
        ))}
      </div>
    </div>
  )
}

export default InputPro