Question

是否可以通过按钮使内容可编辑的段落成为焦点。

我尝试使段落集中（就像您输入一样），但是它不起作用。像这样：

document.getElementById("example").focus();

这是一个外观示例（我在此示例中使用了输入）： https://jsfiddle.net/7rwft2c3/

Answer 1

您要聚焦的元素必须首先可编辑。根据规范，您只能.focus()在可对焦的区域。

规范说：

可聚焦区域一词用于指代界面区域可以成为键盘输入的目标。

此处：https://html.spec.whatwg.org/multipage/interaction.html#focusable-area

因此，首先添加contentEditable属性，然后再添加.focus()元素。

根据下面的注释，.blur()是不必要的，因为一旦删除了contentediable属性，该元素就无法再被聚焦。

请注意，我在这里将<input>更改为<div>：

const el = document.getElementById("myText");

function getFocus() {
  el.setAttribute('contenteditable', 'true');
  el.focus();
}

function loseFocus() {
  el.removeAttribute('contenteditable');
}

<div id="myText">A Div</div>

<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>

是否可以通过按钮使内容可编辑的段落成为焦点？

1 个答案: