javascript 在容器上使用onMouseDown关注内部输入

6ju8rftf 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(104)

我有一个包含在 Package 器div中的输入。在mousedown上的 Package 器，我希望内部输入的焦点。

import "./styles.css";
import { useRef } from "react";

export default () => {
  const ref = useRef(null);

  return (
    <div className="App">
      <div
        className="Wrapper"
        onMouseDown={(e) => {
          ref.current.focus();
          // e.preventDefault();
        }}
      >
        <input ref={ref} />
      </div>
    </div>
  );
};

但是，焦点不起作用，除非我包含e.preventDefault()。但这种方法的问题是它禁用了输入上的文本突出显示，这似乎是鼠标按下时的默认行为，因此不受欢迎。另一方面，如果我使用onClick而不是onMouseDown，即使不阻止默认，它也能正常工作，但我想重点介绍onMouseDown。
为什么会出现这种情况，解决的最好方法是什么？

现场演示

JavaScript

来源：https://stackoverflow.com/questions/76156352/focus-on-inner-input-with-onmousedown-on-container

1条答案

按热度按时间

5n0oy7gb1#

发生这种情况的原因是，只要您在容器中单击，就会触发回调。并且输入是有焦点的，但随后默认处理程序执行并模糊了输入。现在，一种方法是使用setTimeout -来延迟focus()调用。因此，element.focus（）在浏览器的默认处理程序执行之后运行。

(e) => {
        setTimeout(()=>ref.current.focus(), 100)
    }

另一种方法是从输入元素中取出stopPropagation，然后在 Package 器中取出preventDefault。

export default () => {
  const ref = useRef(null);
  return (
    <div className="App">
      <div
        className="Wrapper"
        onMouseDown={(e) => {
          ref.current.focus();
          e.preventDefault();
        }}
      >
        <input ref={ref} onMouseDown={(e) => {
          e.stopPropagation();
        }}/>
      </div>
    </div>
  );
};

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 在容器上使用onMouseDown关注内部输入

现场演示

1条答案

相关问题

热门标签

最新问答