Display Highlight of Tab index
I want to display Hightlight on element that contains tabindex.
<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
<TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC">
<TR>
<TD>name: <INPUT NAME="realname" TABINDEX=4 ACCESSKEY="g" VALUE="Go!"></TD>
<TD ROWSPAN=3>comments<BR>
<TEXTAREA COLS=25 ROWS=5 TABINDEX=3></TEXTAREA></TD></TR>
<TR> <TD>email: <INPUT NAME="email" TABINDEX=2></TD></TR>
<TR> <TD>department: <SELECT NAME="dep" TABINDEX=1>
<OPTION开发者_C百科 VALUE="">...
<OPTION VALUE="mkt">Marketing
<OPTION VALUE="fin">Finance
<OPTION VALUE="dev">Development
<OPTION VALUE="prd">Production</SELECT></TD></TR>
<tr>
<td><input type="button" tabindex="7" value="Tab7"></td>
<td><a href="http://www.google.com" tabindex=6>This is tab6</a></td>
</tr>
<tr>
<td><p tabindex=8>this is tab 8</p></td>
<td><span tabindex=9 onkeypress="return runScript(event)">this is tab 9</span></td>
</tr>
<tr>
<td><input tabindex=10 id="scriptBox" type="text" /></td>
</tr>
</TABLE>
</FORM>
When I press Tab
key 4 times it goes to element that contains "tabindex=4"
and display highlight on it.
I am happy to get idea from you.
Cheer,
Chanthou
You can select all elements with a tabindex
attribute:
<style>
*[tabindex] {
border: solid red 1px;
}
</style>
<p><input type="text" tabindex="1" /></p>
<p tabindex="2">Hello</p>
The question is a little ambiguous - did you want to highlight an element when it has focus or highlight an element that can have focus?
If you know css, you can use the :focus pseudo-class to highlight an element when it has keyboard focus.
The following style will make all inputs' background color change to grey when they receive keyboard focus:
input:focus { background: #ccc; }
精彩评论