没有JavaScript的默认html表单焦点


159

是否可以在不使用JavaScript的情况下将默认输入焦点设置在HTML表单上,例如:

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

我想在不使用JavaScript的情况下加载表单时将默认焦点设置为任何一个文本框(因为我希望用户禁用js时出现这种情况)。

Answers:


292

您可以在HTML5中完成此操作,否则必须使用JavaScript。

HTML5允许您添加autofocus到表单元素,例如:

<input type="text" name="myInput" autofocus />

在支持HTML5的浏览器中(或者更确切地说,在支持HTML5的这一特定部分的浏览器中),它确实可以工作,但是如您所知,并不是所有人都可以使用它。


22

需要注意的一点...如果设置了焦点表单元素,那么使用辅助技术(AT)的任何人(如屏幕阅读器)都需要备份以查看菜单和焦点字段之前的任何其他内容。

我认为,一种首选的方法是不将焦点设置到任何字段,除非有跳过链接(如果有)。这使他们可以选择跳入页面内容或从上至下阅读页面。


添加一个也可以在视觉上隐藏的跳过链接,但是可以通过屏幕阅读器访问就可以了!
James Cazzetta

我对可访问性有很多了解。感谢您添加此答案以帮助我们其他人学习!
Andrew Steitz,

3

就像其他人说的那样,没有Java语言,就无法保证默认字段。如果您有多个用户可能要访问的字段正在使用该accesskey属性,则可能要尝试使用另一个选项。从本质上讲,这意味着用户可以稍后在浏览期间立即返回任何一个字段,这可能对屏幕阅读器的用户等非常有用。

维基百科有关此主题的文章非常有用-http://en.wikipedia.org/wiki/Access_key



-8

不过,您也许可以使用tabindex属性并在默认文本框中使用最小值。在此处查看浏览器支持:

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

该网站建议

(在几乎所有其他情况下(即表单控件和链接),tabindex具有出色的支持)


3
“ tabindex”属性不会自动关注任何元素,甚至不会包含“ tabindex = 1”的元素。需要按<tab>(或单击)以将焦点放在选项卡序列中的第一个元素上。
克林特·帕奇
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.