听html5自动对焦答案

【问题标题】：Listen to html5 autofocus听html5自动对焦
【发布时间】：2020-01-11 01:47:22
【问题描述】：

我有一个 html 表单，我希望它在用户加载页面时自动聚焦。 <form> <input type=text name='username' id='input1' autofocus>

我有 Javascript，旨在将 css 类（ shift-up ) 添加到输入以在输入为焦点。

`var x=document[forms][input1]; 
x.addEventListener('focus', inputFocus); 
function inputFocus {
x.classList.add('shift-up');
} `

我的问题：

当用户加载页面但输入字段已获得焦点时，此类不会添加到输入标记中。但是当您手动单击时，会添加该类。

有什么方法我也可以使用 Javascript 收听 html5 自动对焦？

【问题讨论】：

【解决方案1】：

只需在 CSS 中使用 :focus 选择器即可。无需 JavaScript 添加/删除类。

【讨论】：

【解决方案2】：

而不是使用“困难的”JavaScript 代码 来让您的<input> 工作。使用 CSS 中的 :focus 选项，该选项已经存在并且比尝试使用 EventListener 编写自己的焦点要简单得多。

HTML 代码：

<input type=text name='username' class="placeholder">

CSS 代码：

.placeholder:focus{

}

【讨论】：