В любом случае, чтобы изменить ввод, чтобы отображались только последние 4 цифры, но только если они не наведены?

Похоже, вы хотите замаскировать и снять маску в ответ на два критерия: элемент фокус и наведение состояние… и кажется, что вы уже поняли логику focus и blur. Большой!

В JS нет события «hover», но его близкое приближение можно реализовать с помощью событий mouseenter и mouseleave. Логика для mouseenter и mouseleave аналогична focus и blur соответственно, за исключением того, что они должны работать только в том случае, если элемент не сфокусирован.

Имеет ли элемент фокус, можно определить в JS, сравнив его с document.activeElement. Вот минимальный воспроизводимый пример:

<style>body { font-family: sans-serif; }</style>
<div id = "root"></div><script src = "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js"></script><script src = "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js"></script><script src = "https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
<script type = "text/babel" data-type = "module" data-presets = "env,react">

// This Stack Overflow snippet demo uses UMD modules
const { StrictMode, useState } = React;

function maskAllExceptFinal(str, options = {}) {
  const { maskToken = "*", revealCount = 4 } = options;
  return str.length <= revealCount
    ? str
    : `${maskToken.repeat(str.length - revealCount)}${str.slice(-4)}`;
}

function App() {
  const [masked, setMasked] = useState(true);
  const [testInput, setTestInput] = useState("");

  const handleSubmit = (ev) => {
    ev.preventDefault();
    console.info(testInput);
  };

  const handleMask = (ev) => {
    const isFocused = document.activeElement === ev.currentTarget;
    switch (ev.type) {
      case "blur": {
        setMasked(true);
        break;
      }
      case "focus": {
        setMasked(false);
        break;
      }
      case "mouseenter": {
        if (!isFocused) setMasked(false);
        break;
      }
      case "mouseleave": {
        if (!isFocused) setMasked(true);
        break;
      }
    }
  };

  return (
    <form>
      <input
        onBlur = {handleMask}
        onChange = {(ev) => setTestInput(ev.target.value)}
        onFocus = {handleMask}
        onMouseEnter = {handleMask}
        onMouseLeave = {handleMask}
        maxLength = {9}
        value = {masked ? maskAllExceptFinal(testInput) : testInput}
      />
      <button onClick = {handleSubmit}>Submit</button>
      <p>testInput: {testInput}</p>
    </form>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

</script>

Это нормально, если вы не используете <form onSubmit= {function}> для обработки ввода: в этом случае маскированное значение (*****6789) будет передано в качестве входного значения.

Честно говоря, я бы не рекомендовал возиться с реальным значением только для достижения чисто визуального эффекта. Я делал это раньше и столкнулся с несколькими проблемами, которые поначалу не были очевидны. Некоторые вещи я вспоминаю:

• щелчок по вводу не будет правильно устанавливать позицию курсора в некоторых браузерах (поскольку входное значение менялось в тот самый момент при нажатии, что делало недействительным положение выбора)
• Измененное значение попадет в дальнейшую цепочку обработки и будет отправлено на серверную часть.
• проверка прервется, поскольку входные данные, допускающие только числовой ввод, не могут содержать звездочки ***1233

И есть замечательная альтернатива без заморочек: Выполните переключение исключительно с помощью CSS. Поместите в DOM два разных элемента:

• один из них — вход, содержащий фактическое значение (без изменений)
• другой — это элемент, отображающий замаскированное значение (это может быть ввод с атрибутом «только для чтения», или элемент div, или что-то еще, что позволяет вам получить желаемый визуальный эффект)
• вы используете :focus и :hover (и что еще вы хотите включить) для управления видимостью двух элементов
• Свойство css pointer-events позволяет точно контролировать, какой элемент получает события наведения.

Вот пример, просто чтобы проиллюстрировать идею:

const maskedValue = maskAllExceptFinal(value)

<div className = "container">
  <input className = "actual-value" value = {value} onChange = {...} />
  <input className = "masked-display" value = {maskedValue} readonly aria-hidden = "true" />
</div>

.container {
  position: relative;
}

.container:hover {
  & .masked-display {
    display: none;
  }
}

.actual-value {
  // ...
}

.masked-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}