javascript 使用 data- 属性和值将焦点放在 contenteditable 区域

Question

我有一个模板，里面充满了内容可编辑的区域，这些区域可能已经或可能没有 id 属性。一个区别是它们都包含唯一的数据值，所以我想用它们来帮助我target/focus我的光标以编程方式在特定区域进行编辑。

如果我以这种方式将数据值存储在 var 中：

textArea[0] = this.getAttribute("data-id");

我的用户失去了对他们当前工作的内容可编辑区域的关注，我如何才能将光标强制返回？

document.[data-id=textArea[0]].focus();

感谢您的宝贵时间。

Answer 1

如果你使用vanilla js，你可以这样写：

document.querySelectorAll('[data-id="' + dataId + '"]')[0].focus()

（检查 this answer 如何按属性 select 元素）

如果你可以使用 Jquery 你可以只拥有：

$('[data-id="' + dataId + '"]').focus();

你也可以检查this fiddle以防

javascript set focus on contenteditable area using data- attribute and value