Question

我设计了一个HTML，其tabindex设置为fieds。有3个字段集。较低的字段集包含提交选项卡，并指定了正确的tabindex。但是标签没有指向标签。在fieldset2之后，它直接移动到fieldset。

请找到下面描述的代码：

<form action="#" method="post" id="registrationfrm">
            <fieldset id="personalinfo">
            <div class="fieldwrapper">
                <label for="register_firstname">first name</label> 
                <div class="inputwrapper">    
                    <input type="text" tabindex="201" value="" name="register_firstname" id="register_firstname">
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_lastname">last name</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="202" name="register_lastname" id="register_lastname">
                </div>
            </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_industry">industry</label>
                <div class="inputwrapper">

<select  tabindex="203" id="register_industry" name="register$industry">
<option value="">--- please select an industry ---</option>
<option value="adagency">Ad Agency/Public Relations</option>
<option value="other">Other</option>
</select>
</div>
            </div>        
            <div class="fieldwrapper">
                <label for="register_role">role</label>
                <div class="inputwrapper">
                    <select tabindex="204" id="register_role" name="register_role">
<option value="">--- please select a role ---</option>
<option value="Education">Educator/Student</option>
<option value="MktSales">Marketing/Sales</option>
</select>
                </div>
            </div>
            <div class="clear"></div>      
            <div class="fieldwrapper">
                <label for="register_loginname">user name</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="205" name="register_loginname" id="register_loginname">
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_emailaddress">email address</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="206" name="register_emailaddress" id="register_emailaddress">
                </div>
            </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_password">password</label>
                <div class="inputwrapper">
                    <input type="password" value="" tabindex="207" name="register_password" id="register_password">
                </div>
             </div>
            <div class="fieldwrapper">
                <label for="register_passwordconfirm">confirm password</label>
                <div class="inputwrapper">
                    <input type="password" tabindex="208" value="" name="register_passwordconfirm" id="register_passwordconfirm">
                </div>
             </div>
            <div class="clear"></div>
            <div class="fieldwrapper">
                <label for="register_securityquestion">security question</label>
                <div class="inputwrapper">
<select tabindex="209" id="register_securityquestion" name="register$securityquestion">
<option value="">--- please select a question ---</option>
<option value="School">What was the name of your elementary school?</option>
</select>
                </div>
            </div>
            <div class="fieldwrapper">
                <label for="register_securityanswer">security answer</label>
                <div class="inputwrapper">
                    <input type="text" tabindex="210" title="security answer" value="" name="register_securityanswer" id="register_securityanswer">
                </div>
            </div>
            <div class="clear"></div>
        </fieldset>
        <fieldset id="registrationcheckboxes">
            <label for="register_agree"><input type="checkbox" name="register_agree" id="register_agree" class="checkbox {validate:{required:true, messages:{required:'Please review and accept the terms and conditions. If you do not agree to the terms and conditions please use the website as our guest.'}}}" tabindex="211" value="true">&nbsp;I accept Neenah's terms and conditions.</label>
            <div id="register_agreetoterms_exception"></div>
            <label for="register_receiveemails"><input type="checkbox" checked="" name="register_receiveemails" id="register_receiveemails" tabindex="212" value="true">&nbsp;YES, I would like to receive occassional emails about Neenah Paper news and special offers.</label>
        </fieldset>
        <fieldset id="submitsection">
                <a tabindex="213" id="registration_submit" href="#">register account</a>
        </fieldset>
            </form>

CSS

#registration .fieldwrapper {
display:inline;
float:left;
padding:0 3px;
}


.inputwrapper {
display:block;
font-size:12px;
padding-bottom:10px;
}


a#registration_submit {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/global/CreateNewAccountSubmit.png) no-repeat scroll 0 0;
float:left;
height:21px;
position:relative;
text-indent:-9000px;
width:160px;
}

我很高兴得到你的消化。

谢谢，尼尔默尔

Answer 1

我尝试了你的代码，它确实关注注册链接。但由于文本缩进设置为-9000px，因此未显示注册链接。为此，您可以使用焦点伪类并删除文本缩进。 E.g。

a#registration_submit:focus {
    text-indent:0;
}

请记住，这在较旧的IE浏览器中不起作用。要解决这个问题，您可能不得不求助于JavaScript。

Tabindex不适用于<a> tag inside fieldset in HTML</a>

CSS

1 个答案: