Question

我正在Angular中构建一个组件，我有一个html画布，当我点击它时，我需要在画布上放置一个输入元素，以便用户可以写一些文本并按回车键，然后文本将是复制到画布。

所以现在一切都有效，但我希望当用户点击画布时，同时将输入放在画布上，焦点设置在画布上，这样用户就可以立即写入而不是必须再次点击输入。

我将问题减少到最小，所以我现在有一个简单的画布和一个输入元素，当我点击画布时我想把焦点设置在输入上，但它不起作用。有人可以帮帮我吗？

我有fiddle，这是js

const canvas = document.querySelector('#my-canvas');

canvas.addEventListener('mousedown', (e) => {
  const input = document.querySelector('.canvas__input');
  console.log(input);
  input.focus();
});

Answer 1

根据MDN doc：

如果你从一个mousedown事件处理程序调用HTMLElement.focus（），你必须调用event.preventDefault（）来保持焦点不离开 HTML元素。

所以请试试这个：

const canvas = document.querySelector('#my-canvas');

canvas.addEventListener('mousedown', (e) => {
  e.preventDefault();
  const input = document.querySelector('.canvas__input');
  console.log(input);
  input.focus();
});

focus（）不使用输入

1 个答案: