Как сфокусировать бумажный ввод в lit-element

У меня есть элемент <paper-input> на моей странице, который я хочу выбрать при загрузке страницы. Я пытался сфокусировать его при первом обновлении страницы, но это не сработало.

firstUpdated() {
    this.shadowRoot.querySelector('#input').focus();
}

Страница ввода бумаги предполагает, что установка tabindex необходима для работы input.focus(), поэтому я тоже сделал это, и это не сработало. Я также пробовал решения, предложенные для этого вопроса SO Примерно paper-input в полимере, и ни один из них не работал.

Есть ли способ сфокусировать paper-input в освещенном элементе?


javascript web-component lit-element
person Sebastian Gaweda    schedule 30.07.2019    source источник
comment
Вы пробовали использовать paper-input _2 _ собственность?   -  person Umbo    schedule 01.08.2019
comment
Это также должно быть возможно при вводе базового HTML с помощью функции фокуса. Атрибут автофокуса у меня работает, хотя   -  person Niklas    schedule 16.09.2019

Ответы (2)


arrow_upward
0
arrow_downward

У меня есть хак, который я, возможно, не буду использовать в продакшене, но, возможно, он может послужить источником вдохновения.

focusDescription() {
    let descriptionElement = this.shadowRoot.getElementById("description") as any
    let descriptionInputElement = descriptionElement.inputElement.children[0]
    descriptionInputElement.inputElement.children[0].focus()
}
person magnusson    schedule 08.11.2020

arrow_upward
0
arrow_downward

Используйте ref, чтобы получить ссылку на элемент, а затем используйте ее для установки фокуса. :

inputRef: Ref<PaperInputElement> = createRef();
​
render() {
    return html`<paper-input ${ref(this.inputRef)}></paper-input>`;
}
​
firstUpdated() {
    this.inputRef.value.focus();
}

Обратите внимание, что autofocus от Polymer не будет работать, поскольку он полагается на скрытые прокладки DOM Polymer и нарушает захват фокуса, если вы используете <paper-dialog>, см. https://github.com/PolymerElements/iron-overlay-behavior/issues/282

person Keith    schedule 30.04.2021