React：将输入集中在键盘点击（ctrl F / cmd F）而不是触发浏览器搜索

Question

早上好，当有人按下 CTRL+F 或 CMD+F 而不是触发浏览器的搜索时，我试图将搜索输入集中在我的应用程序中，我想问一下这是否可能。我在网上找到但显然不起作用的实现是这样的：

  window.addEventListener('keydown', function (e) {
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
      if (document.getElementsById('search').not(':focus')) {
        e.preventDefault();
        console.log('Search is not in focus');
        document.getElementsById('search').focus();
      } else {
        console.log('Default action of CtrlF');
        return true;
      }
    }
  });

我也曾尝试使用 React 中的 useRef() 来获取输入并在之后聚焦它，但无法使其工作。有什么提示、想法、代码片段可以帮到我吗？

Answer 1

将 getElementsById 更改为 getElementById
使用document.activeElement检查当前焦点元素（更好的方法）

试试这个：

window.addEventListener('keydown', function (e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
    if (document.getElementById('search') !== document.activeElement) {
      e.preventDefault();
      console.log('Search is not in focus');
      document.getElementById('search').focus();
    } else {
      console.log('Default action of CtrlF');
      return true;
    }
  }
});

React：将输入集中在键盘点击（ctrl F / cmd F）而不是触发浏览器搜索

React: Focus input on keyboard click (ctrl F / cmd F) instead of triggering Browser Search

html

javascript

reactjs

use-ref