HTML之将焦点移动到某个元素上

来源：互联网发布：阿国网络编辑：程序博客网时间：2024/06/10 03:47

1：使用Tab键进行导航

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Sample</title></head><body><p>请输入用户名和密码：</p><form name="addUser" id="addUser" method="POST"        action="addUser.asp">    <label id="normal" for="username">用户名：</label>    <input tabindex="1" name="user_id" id="user_id" type="text">    <label id="normal" for="user_pwd">密码：</label>    <input tabindex="2" name="user_pwd" id="user_pwd" type="password">  <br>  <input tabindex="3" type="submit" name="Submit" value="提交">  <input tabindex="4" name="Reset" type="reset"           id="Reset" value="重置"></form>或者，<a tabindex="5" href="http://zhangyafei.wordpress.com/">匿名存取我的BLOG</a></body></html>

在这个导航中，可以使用Tab键依次导航获取控件的焦点，Enter键用来激活这个控件。

2：使用热键导航

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Sample</title></head><body><p>请输入用户名和密码：</p><form name="addUser" method="POST" action="addUser.asp">    <label id="normal" for="username">用户名：</label>    <input accesskey="1" name="user_id" id="user_id" type="text">    <label id="normal" for="user_pwd">密码：</label>    <input accesskey="2" name="user_pwd" type="password">    <br>    <input accesskey="3" name="Submit" type="submit" value="提交">    <input accesskey="4" name="Reset" type="reset" value="重置"></form>或者，<a accesskey="5" href="http://zhangyafei.wordpress.com/">匿名存取我的BLOG</a></body></html>

所有的HTML元素都可以定义accesskey属性，该属性可以规定访问元素的键盘快捷键，也称为热键。

accesskey的值是一个单字符或者多个使用空格隔开的字符，当用户单击键盘上的这个字符时(一般是和另一个功能键组合)，就可以将焦点移动到这个字符代表的

控件上。

根据访问键定义的元素不同，当焦点移动到元素上时，行为也不同：

（1）当焦点移动到一个超链接时，该超链接处于激活状态。

（2）当焦点移动到一个单选按钮或者复选框上时，该控件值被改变，这一点也与Tab键不同，Tab键并不改变它们的值，如果要改变值，还必须按Enter键

（3）当焦点移到一个输入文本框时，该文本框可以输入文本