问题 我可以在具有满足感的元素上使用自动对焦吗?


我正在使用 contenteditable 属性 <div> 为了使它作为一个文本字段按需(用户重命名的东西)。但我想启用 autofocus 在它上面,所以用户可以立即开始打字( <div> 永远都有 contenteditable 最初启用)。

这有效和/或可能吗?或者我是否必须切换到标准文本输入?


11124
2017-07-13 17:26


起源



答案:


我想,你必须在大多数浏览器中使用JavaScript。它不适用于iOS,它只允许程序化使用 focus() 在真实用户交互的事件处理程序中(例如 click 或触摸相关事件)。

另外,请注意,如果页面上有其他输入,则用户可能会在文档完全加载之前将注意力集中在其中一个上,在这种情况下,用户发现焦点已从在他们之下的时候 load 事件确实触发,所以你应该使用输入' focus 事件来跟踪这个。

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

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

13
2017-07-13 22:53



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


答案:


我想,你必须在大多数浏览器中使用JavaScript。它不适用于iOS,它只允许程序化使用 focus() 在真实用户交互的事件处理程序中(例如 click 或触摸相关事件)。

另外,请注意,如果页面上有其他输入,则用户可能会在文档完全加载之前将注意力集中在其中一个上,在这种情况下,用户发现焦点已从在他们之下的时候 load 事件确实触发,所以你应该使用输入' focus 事件来跟踪这个。

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

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

13
2017-07-13 22:53



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


对于未来的观众:

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

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

所以,一旦页面加载...... BAM jQuery专注于具有'autofocus'属性的元素!

您可以使用选择器来获得您想要的内容。


2
2018-03-21 03:55