HTML 解决方案
可以在没有 Javascript 的 HTML 表单上设置默认输入焦点。
这可以在 HTML5 中完成,因为它允许我们在表单元素上使用 autofocus 属性。
设置默认表单焦点的示例:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> </head> <body> <input type="text" name="myInput" autofocus /> </body> </html>
在上面的示例中,我们使用了一个 <input> 元素并为其添加了 autofocus 属性。
让我们看另一个例子,我们使用了几个 <input> 元素,并且只其中一个元素上设置了 autofocus 属性。
仅为一个 <input> 元素设置焦点的示例:
<!DOCTYPE html> <html> <head> <title>文档的标题.</title> <style> div { margin-bottom: 10px; } label { display: inline-block; width: 70px; } </style> <body> <h1>Example</h1> <form action="/form/submit" method="get"> <div> <label for="name">Name:</label> <input type="text" id="name" name="name" autofocus> </div> <div> <label for="surname">Surname:</label> <input type="text" id="surname" name="surname"> </div> <div> <label for="year">Year:</label> <input type="number" id="year" name="year" value="2015" disabled> </div> <input type="submit"> </form> </body> </html>
对于第一个 <input>,我们设置了 autofocus 属性,对于第三个 <input>,我们设置了 disabled 属性。
其中我们还使用了一些 CSS 并为 <div> 元素设置了 margin-bottom 属性,并为 <label> 元素指定了“inline-block”值和 width 属性的 display 属性。
日期:2020-06-02 22:15:12 来源:oir作者:oir