input?獲取光標位置設(shè)置光標位置方案

更新時間：2023年06月29日 10:09:27 作者：時傾

這篇文章主要為大家介紹了input?獲取光標位置設(shè)置光標位置方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

需求

輸入框，支持鍵盤輸入與快捷按鍵輸入，UI 如下「基于antd」：

關(guān)鍵點：鍵盤輸入直接使用 input onChange 事件即可，快捷按鍵輸入需要根據(jù)光標位置插入，插入后光標在新插入的字符后。

解決方案

獲取 input 光標位置

通過 element.selectionStart 獲取光標位置。

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

如圖，此時的 selectionStart 是 3。

設(shè)置 input 光標

通過 element.setSelectionRange() 設(shè)置光標位置，前提是 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)表現(xiàn)如下圖：

完整代碼

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

以上就是input 獲取光標位置設(shè)置光標位置方案的詳細內(nèi)容，更多關(guān)于input 獲取設(shè)置光標位置的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: