Показывать подсветку указателя вкладок - PullRequest
Новая
       23

Показывать подсветку указателя вкладок

3 голосов
/ 19 января 2010

Я хочу отобразить Hightlight на элементе, который содержит 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 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>

Когда я нажимаю клавишу Tab 4 раза, он переходит к элементу, который содержит "tabindex=4" и отображает подсветку на нем.

Я рад получить от вас идею.

Приветствие,

Chanthou

Ответы [ 2 ]

3 голосов
/ 19 января 2010

Вы можете выбрать все элементы с атрибутом tabindex: 

<style>
*[tabindex] {
 border: solid red 1px;
}
</style>

<p><input type="text" tabindex="1" /></p>

<p tabindex="2">Hello</p>

Вопрос немного двусмысленный - вы хотели выделить элемент, когда он имеет фокус, или выделить элемент, который может иметь фокус?

1 голос
/ 19 января 2010

Если вы знаете css, вы можете использовать псевдокласс: focus, чтобы выделить элемент, когда он имеет фокус клавиатуры.

В следующем стиле цвет фона всех входных данных изменится на серый при получении клавиатуры.фокус:
input:focus { background: #ccc; }

...