拒绝输入时插入符号跳到结尾

Question

I have an input for a value. I want to validate the new value entered by the user and prevent the value from appearing in the input if it's invalid. For instance, the value should be numeric, and hence can only contain numbers, dots, and commas.

I have a validation function which returns true / false depending on whether a value meets the criteria (works as intended):

function validateInput(input) {
    let allow = true
    const splitValuesByDecimal = input.split(',')
        
    if(allow) allow = /^[\d|,|.]*?$/.test(input) // allow only digits, dots, and commas
    if(allow) allow = splitValuesByDecimal.length <= 2 // allow only 1 decimal separator (comma)
    if(allow && splitValuesByDecimal.length > 1) allow = splitValuesByDecimal.at(-1).length <= 2 // allow only maximum of 2 decimal characters
    return allow
}

In my input field, I call a custom handleChange function which ensures that the new input is valid before storing it in the state variable.

Rendering input

<input value={inputVal} onChange={handleChange} />

Handling input change

function handleChange(e) {
    const value = e.target.value
    if(validateInput(value)) {
        setInputVal(value)
    }
}

If an invalid input is inserted and validation fails, the value in my input field does not change (as intended), but the caret jumps to the end of the input field (not desirable).

---

Attempted Solution

I have tried to fix the caret jumping behaviour by adopting this answer where I created a cursor state variable which keeps track of the intended caret position:

function MyComponent() {

    const [inputVal, setInputVal] = useState('')
    const [cursor, setCursor] = useState(null)
    const inputRef = useRef()

    useEffect(() => {
        if (inputRef.current) inputRef.current.setSelectionRange(cursor, cursor);
    }, [inputRef, cursor, inputVal])

    function validateInput(input) {
        ...
    }

    function handleChange(e) {
        const value = e.target.value
        if(validateInput(value)) {
            setCursor(e.target.selectionStart)
            setInputVal(value)
        }
        else {
            setCursor(e.target.selectionStart - 1)
        }
    }

    return (
        <input 
            ref={inputRef}
            value={inputVal} 
            onChange={handleChange} />
    )
}

With this solution, the caret persists at the correct position the first time an invalid value is entered, but as I keep on subsequently pressing the same key inserting invalid value over and over again, after the first time, the caret moves back to the end of the input. This is because the useEffect is not called the second and subsequent times.

How can I make this work so that caret always stays at the same position regardless of how many times the user attempts to insert an invalid value?

Answer 1

Update:-

Sorry my bad, I haven't looked at the question completely. However what I was saying is also correct but not in current case. Please find the updated code below. Below code should also be more performant as it does not involve re-renders on every change

import React, { useState, useRef } from 'react';

export function App(props) {
  const inputRef = useRef()
  const oldVal = useRef(null)

  function validateInput(input) {
    let allow = true
    const splitValuesByDecimal = input.split(',')

    if(allow) allow = /^[\d|,|.]*?$/.test(input) // allow only digits, dots, and commas
    if(allow) allow = splitValuesByDecimal.length <= 2 // allow only 1 decimal separator (comma)
    if(allow && splitValuesByDecimal.length > 1) allow = splitValuesByDecimal.at(-1).length <= 2 // allow only maximum of 2 decimal characters
    console.log(allow)
    return allow
  }

  function handleChange(e) {
        const valueNew = e.target.value
        const pos = e.target.selectionStart - 1
        if(validateInput(valueNew)) {
            oldVal.current = valueNew
        } else {
          inputRef.current.value = oldVal.current
          inputRef.current.setSelectionRange(pos, pos)
        }
    }

  return (
    <div key='mydiv' className='App'>
      <input key='MyFixedKeyValue' ref={inputRef} onChange={handleChange} />
    </div>
  );
}

I also changed the same on playcode code link

React re-renders the whole component on setstate call. In your case values are being kept as it is a controlled input. But behind the scene react is basically creating a new input field every time you are entering a value. To force react to use the same field pass key prop with constant value.

<input 
        key='MyFixedKeyValue'
        ref={inputRef}
        value={inputVal} 
        onChange={handleChange} />