html - 一，二，跳过几个……tabindexes，也就是

Question

问题：在我的 HTML 注册表单中，我有 18 个元素。每个元素都有一个 tabindex，从 1 处的第一个文本输入开始到 18 处的最后一个表单元素。

当我从第一个文本输入开始时，填写信息然后 tab 。. . 它无处可去。至少，在我看来是这样的。然后我再次选项卡，它进入文本输入，tabindex="2"我不知道为什么会这样。我进入一个表单域，然后我必须按 2 x 才能进入下一个。

这就是一半表格的反应方式。此表格分布在两列中。没有任何元素可以将表单的左侧部分与表单的右侧部分分开——当然，布局除外。关键是表单的正确部分行为正确。是什么赋予了？

这是相关的代码：

<form id="form1" name="form1" class="bsf-form topLabel page1" autocomplete="off" enctype="multipart/form-data" method="post" novalidate><!--534-->
<div id="billing-form-columns" class="row"><!--536-->
<div id="billing-column-1" class="span8"><!--537-->

<!--legend>Billing Information</legend-->
<!--div class="sub-legend">Please provide your billing and payment information.</div-->

<!-- ERRORS -->                 
<div id="errors" class="alert alert-error">
    <!--button type="button" class="close" data-dismiss="alert">×</button-->
    <div class="err-info"><span class="err-txt">Please address the following issues before the order can be placed:</span></div>
    <div class="error-columns clearfix">
        <div class="err-col-left"></div>
        <div class="err-col-right"></div>                       
    </div>                      
</div>
<!--SUCCESS-->
<div id="success" class="alert alert-success"></div>                    

<div class="row-fluid height60">
    <label class="desc" for="companyName">Company Name<span class="req">*</span></label>
    <input type="text" id="companyName" name="companyName" class="input-xxlarge xxlarge-redux focus" value="" tabindex="1" placeholder="" title="Enter the name of your company" />
</div><!--/row-->  

<div class="row-fluid height60">
    <label class="desc" for="firstName">Full Name<span id="req_2" class="req">*</span></label>
    <input type="text" id="firstName" name="firstName" class="input-large" value="" tabindex="2" placeholder="" title="Enter your first name. If there is another name on the credit card, you can enter that below with the credit card information." />                       
    <input type="text" id="lastName" name="lastName" class="input-large" value="" tabindex="3" placeholder="" title="Enter your last name. If there is another name on the credit card, you can enter that below with the credit card information." />                          
</div><!--/row-->  

<div class="row-fluid height60">
    <label class="desc" for="address">Address<span class="req">*</span></label>
    <input type="text" id="address" name="address" class="input-xxlarge xxlarge-redux" value="" tabindex="4" placeholder="" title="Enter your billing address"/>                                        
</div><!--/row-->            

<div class="row-fluid height45">
    <label class="desc" for="address2"></label>
    <input type="text" id="address2" name="address2" class="input-xxlarge xxlarge-redux" value="" tabindex="5" placeholder="Address 2 (optional)" title="This field for a second address (suite, apartment, department, etc.) is optional"/>
</div><!--/row-->  

<div class="row-fluid height60 clearfix">
    <div class="label-two clearfix">
        <span class="desc-left"><label class="desc" for="city">City<span class="req">*</span></label></span>
        <span class="desc-right"><label class="desc" for="spr1">State / Province / Region</label></span>
    </div>
    <input type="text" id="city" name="city" class="input-large" value="" tabindex="6" placeholder="" title="Enter the city for your billing address" />
    <input type="text" id="spr1" name="spr1" class="input-large" value="" tabindex="7" placeholder="" title="Enter the state, province or region associated with your credit card" />
</div><!--/row-->  

<div class="row-fluid clearfix" id="city-state">
    <div class="label-two clearfix">
        <span class="desc-left"><label class="desc" for="pzc">Postal / ZIP Code<span class="req">*</span></label></span>
        <span class="desc-right"><label class="desc" for="country">Country<span class="req">*</span></label></span>
    </div>
    <input type="text" id="pzc" name="pzc" class="input-large" value="" tabindex="8" placeholder="" title="Enter the Postal or ZIP Code associated with your credit card" />                                        
    <select id="country" name="country" class="width210" tabindex="9" title="Select the name of the country associated with your credit card" >
        <option value="" selected="selected"></option>
        <option value="US" >United States</option>
        <option value="UK" >United Kingdom</option>
        <option value="AU" >Australia</option>
        <option value="ZM">Zambia</option>
        <option value="ZW">Zimbabwe</option>
    </select>                                                                   
</div><!--/row-->  

<div class="row-fluid height60 clearfix">
    <div class="label-two clearfix">
        <span class="desc-left"><label class="desc" for="emailField">E-mail<span class="req">*</span></label></span>
        <span class="desc-right"><label class="desc" for="phoneIntl">Phone Number<span class="req">*</span></label></span>
    </div>
    <input type="text" id="emailField" name="emailField" class="input-large" value="" tabindex="10" placeholder="" title="Enter a valid e-mail address" />                      
    <input type="text" id="phoneIntl" name="phoneIntl" class="input-large" value="" tabindex="11" placeholder="" title="Enter a valid phone number where we can reach you" />
</div><!--/row-->  
</div><!--537-->


<div id="billing-column-2" class="span8"><!--860-->
<div class="cc-validator clearfix">
    <div class="row-of-cards height60 clearfix">
        <span class="visa">Visa</span>
        <span class="mastercard">MasterCard</span>
        <span class="amex">American Express</span>
        <span class="discover">Discover</span>
    </div>

    <div class="row-fluid height60 clearfix">
        <label class="desc" for="card_number">Credit Card Number<span class="req">*</span></label>
        <input type="text" id="card_number" name="card_number" class="input-medium focused width210" value="" tabindex="12" placeholder="Credit Card Number" title="Enter a current and valid credit card number for any of the cards listed above." />
    </div>

    <div class="row-fluid height60 clearfix">
        <div class="label-two-apart clearfix">
            <span class="desc-left-apart-269"><label class="desc" for="expiry_date">Expiration Date<span class="req">*</span></label></span>
            <span class="desc-right-apart-left"><label class="desc" for="cvv">Security Code<span class="req">*</span></label></span>
        </div>
    </div>  

    <div class="input-two-apart-850 clearfix">
            <div class="input-left-apart clearfix">
                <span class="month-year">
                    <select id="month-list" name="month-list" tabindex="13" title="Select the credit card expiration date (month and year)."></select>
                    <select id="year-list" name="year-list" tabindex="14" title="Select the credit card expiration date (month and year)."></select>            
                </span>
                <span class="cvv-code">
                    <input type="text" id="cvv" name="cvv" class="input-mini" maxlength="3" value="" tabindex="15" placeholder="" title="Enter the security code from the back of your credit card. If you have an American Express card, the security code is on the front of the card." />                                                        
                </span>
            </div>
            <div class="input-right-apart clearfix"></div>
    </div>
</div>


<div class="row-fluid height60 clearfix">
    <label class="desc" id="lbl-name-on-cc-card" for="name_on_card">Name on Credit Card<span class="req">*</span></label>
    <input type="text" name="name_on_card" id="name_on_card" class="input-medium focused width210" value="" tabindex="16" placeholder="" title="Enter the name as it appears on the credit card"/>
</div>


<div class="row-fluid height60 clearfix">
    <label class="desc" id="lbl-password1" for="password1">Password<span class="req">*</span></label>
    <input type="password" name="password1" id="password1" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Enter a password containing uppercase and lowercase characters, numbers and special characters such as !, @, #, $, _ and %" />
</div>


<div class="row-fluid height60 clearfix">
    <label class="desc" id="lbl-password2" for="password2">Re-enter Password<span class="req">*</span></label>
    <input type="password" name="password2" id="password2" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Repeat the password you entered above" />
</div>


<div class="row-fluid clearfix" id="agreement">
    <label class="desc">Agreement<span class="req">*</span></label>
    <input type="checkbox" checked="checked" tabindex="18" value="I accept ACME INC's Terms and Conditions" class="field checkbox" name="acceptTerms" id="acceptTerms" title="You need to accept our Terms and Conditions before you can place your order.">
    <label for="acceptTerms" class="choice">I accept the ACME INC <a target="_new" href="/terms.php">Terms and Conditions</a></label>
</div>


<div class="form-actions form-actions-plus">
    <div class="btn-align-right"><button type="submit" class="btn btn-primary" id="bsfSubmit" tabindex="18">Accept Billing Information and Continue</button>
    </div>
</div>

<input type="hidden" name="telephone" />
<input type="hidden" name="jsn" />
<input type="hidden" name="ctt" />
</div>
</form>    

真的，我需要的只是另一双眼睛来告诉我哪里可能做错了。谢谢。

Answer 1

事实证明，删除所有 tabindex 标签完成了大约 90% 的工作。从一个表单元素到另一个表单元素不再有任何问题。

罪魁祸首是：

1）同一页面上的其他表单，我认为 tabindex 是按表单而不是按页面。

2) Select2 为其替换的每个选择元素分配 -1 的 tabindex。因此，跳到 select2 下拉菜单以及跳开它，可能会导致随机的痉挛 Web 浏览器行为。

#1 的解决方案：删除所有表单中的所有 tabindex 标签。

#2 的解决方案：编写一段 JavaScript 以确保 select2 元素始终接收焦点，当您从前一个元素切换到它时，并确保 select2 元素始终将焦点传递给下一个表单元素。

// COMING FROM THE ELEMENT IMMEDIATELY BEFORE THE SELECT2:

$('#postalCode').on('keydown', function(evt){
    if(evt.keyCode === 9){
        evt.preventDefault();
        var el = $('#s2id_country a');
        if(input !== undefined){
            input.focus();
        }
    }
});

// THEN FROM THE SELECT2 TO THE NEXT FORM ELEMENT
$('#s2id_country a').on('keydown', function(evt){
    if(evt.keyCode === 9){
        evt.preventDefault();
        var el = $('#emailField');
        if(el.length){
            el.focus();
        }
    }
});

也许有一个更优雅的解决方案。想一想，甚至有可能编写一个函数并使用 jQuery 术语来查找nextandprevious元素。无论如何，感谢所有帮助我解决这个问题的人。