使用React使用onkeydown在文本结束时使用cart/text-cursor进行焦点输入元素

Question

我的组件中有两个输入字段：

const MyComponent = () => {

  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'ArrowLeft') {
      ref.current?.setSelectionRange(value.length, value.length)
      ref.current?.focus()
    }
  }

  const [value, setValue] = useState('1234')
  const ref = useRef<HTMLInputElement>(null)

  return (
    <>
      <input
        onChange={({target}) => setValue(target.value)}
        value={value}
        ref={ref}
        type={'text'}/>

      <input
        onKeyDown={onKeyDown}
        type={'text'}/>
    </>
  )
}

---

当我在第二个输入中击中左箭头键时，应该集中第一个输入，并且光标应在输入文本的末尾。

但是光标处于错误的位置。为什么这不起作用？

Answer 1

光标是否向最后一个角色的左侧移动一个位置？

有趣的是，当使用onkeyup（键的发布）而不是onkeydown时，问题似乎消失了。我列出了该解决方案，然后还有其他几个示例，其中包括下面的解释。

解决方案

import { useRef, useState } from "react";

const MyComponent = () => {
  const [value, setValue] = useState("1234");
  const ref = useRef(null);

  const onKeyUp = (event) => {
    if (event.key === "ArrowLeft") {
      const textInput = ref.current;
      const len = value.length;

      textInput.setSelectionRange(len, len);
      textInput.focus();
    }
  };

  return (
    <>
      <input
        onChange={({ target }) => setValue(target.value)}
        value={value}
        ref={ref}
        type={"text"}
      />

      <input onKeyUp={onKeyUp} type={"text"} />
    </>
  );
};

export default MyComponent;

https://codesandbox.io/s/cursor-cursor-cursor-endor-endor-end-end of -input-onkeyup-x6ekke

说明

我的猜测是因为onkeyup自然遵循onkeydown，当我们在React中接收OnKeydown事件时，根据您的示例代码，发生以下顺序（或一般说类似这样的事情）：

内部onkeydown ...

1. 我们的光标已移至文本输入的末尾。<<<<<<<<<<< /p>

   ref.current？.setselectionrange（value.length，value.length）

2. 文本输入接收焦点。

   ref.current？.focus（）

3. 然后，左箭头键的释放onkeyup要在DOM中运行的事件（我们没有在React中执行此操作） em>现在，由于上述步骤2的结果，焦点是在文本输入上。输入重点是将左箭头键按/释放左箭头键的默认行为是将光标一个位置移至左侧，将其从输入文本末端放置一个位置。

其他示例/解决方案，

如果您坚持使用onkeydown，这里还有其他几个示例。

event.preventdefault（）

const onKeyDown = (event) => {
  if (event.key === "ArrowLeft") {
    event.preventDefault();
    const textInput = ref.current;
    const len = value.length;
    textInput.setSelectionRange(len, len);
    textInput.focus();
  }
};

settimeout（）

const onKeyDown = (event) => {
  if (event.key === "ArrowLeft") {
    setTimeout(() => {
      const textInput = ref.current;
      const len = value.length;
      textInput.setSelectionRange(len, len);
      textInput.focus();
    }, 0);
  }
};

https://codesandbox.io/s/cursor-end-of-input-example-h1yrdr

我的猜测是，这些解决方法有效地阻止了浏览器，从而超出了本机键向下触发或延迟我们的处理程序从运行到 分别启动了本机事件。