Можно ли использовать автофокус на элементе с contenteditable?

я использую contenteditable атрибут <div> чтобы он действовал как текстовое поле по требованию (для пользователей, чтобы переименовать что-то). Но я хочу включить autofocus на нем, а также, Так что пользователи могут начать печатать сразу (<div> всегда contenteditable изначально включена).

это действительно и / или возможно? Или мне придется переключиться на стандартный ввод текста?

11
autofocus contenteditable input text

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>
13

для будущих зрителей:

Я думаю, что у меня может быть немного более элегантное решение.

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

Итак, после загрузки страницы... BAM jQuery фокусируется на элементе с атрибутом "автофокус"!

вы можете поиграть с селектором, чтобы получить именно то, что вы хотите.

2