我可以对具有 contenteditable 的元素使用自动对焦吗？答案

【问题标题】：Can I use autofocus on an element with contenteditable?我可以对具有 contenteditable 的元素使用自动对焦吗？
【发布时间】：2012-07-13 14:15:38
【问题描述】：

我在<div> 上使用contenteditable 属性，以使其按需充当文本字段（供用户重命名）。但我也想在上面启用autofocus，这样用户就可以立即开始输入（<div> 最初总是启用contenteditable）。

这是有效的和/或可能的吗？还是我必须切换到标准文本输入？

【问题讨论】：

标签： text input contenteditable autofocus

【解决方案1】：

对于未来的观众：

我想我可能有一个更优雅的解决方案。

$(window).on("load", function() {
  $("[autofocus]").focus();
});

所以，一旦页面加载... BAM jQuery 会关注具有“autofocus”属性的元素！

您可以使用选择器来获得您想要的结果。

【讨论】：

【解决方案2】：

我认为，您必须在大多数浏览器中使用 JavaScript。而且它不适用于 iOS，它只允许在真正的用户交互的事件处理程序中以编程方式使用 focus()（例如 click 或与触摸相关的事件）。

另外，请注意，如果页面上有其他输入，则用户可能会在文档完全加载之前专注于其中一个输入，在这种情况下，用户会发现焦点有当load 事件触发时从它们下方移动，因此您应该使用输入的focus 事件来跟踪它。

<div contenteditable="true" id="editable"></div>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("editable").focus();
    };
</script>

【讨论】：

如果 HTML5 自动对焦属性开始支持 contenteditable 元素，那么这可能是一个更好的解决方案。但是目前它只适用于表单元素：developer.mozilla.org/en-US/docs/Web/HTML/…
其实onload不需要focus。