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

Question

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

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

Answer 1

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

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

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

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

Answer 2

对于未来的观众：

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

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

所以，一旦页面加载... BAM jQuery 专注于具有“自动对焦”属性的元素！

您可以使用选择器来获得您想要的东西。