autofocus

autofocus

autofocus是一个布尔属性，表示一个元素在页面加载时或其所属的<dialog>被显示时应该获得焦点。

使用技巧

1. 如果页面上的多个元素有autofocus属性，则第一个元素获得焦点。
2. autofocus属性可被用于<input>、<select>、<textarea>、<button>以及设有contenteditable属性的元素。

案例

• 页面加载时获得焦点

<input type="text" autofocus />
<select name="" id="" autofocus></select>
<textarea cols="30" rows="10" autofocus></textarea>
<button autofocus>Button</button>

• 与<dialog>元素结合

demo.html

<dialog id="dialog">
   <input autofocus />
   <button id="close">close</button>
</dialog>

<button id="show">Show Modal</button>

demo.js

const oDialog = document.querySelector('#dialog')
const oShow = document.querySelector('#show')
const oClose = document.querySelector('#close')

oShow.addEventListener('click', () => {
    oDialog.showModal()
}, false)

oClose.addEventListener('click', () => {
    oDialog.close()
}, false)

• 与带有contenteditable属性的元素结合

<div contenteditable autofocus>
    123
</div>