一，二，跳过一些... tabindexes，即

Question

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

当我开始使用第一个文本输入时，请填写信息然后选项卡。 。 。它无处可去。至少，这就是我的看法。然后我再次选中，然后用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为它替换的每个select元素指定-1的tabindex。因此，对select2下拉列表进行选项卡以及远离它的选项卡可能会导致随机的痉挛式Web浏览器行为。

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

＃2的解决方案：编写一段JavaScript以确保select2元素始终接收焦点，当您从前一个元素选中它时，并确保select2元素始终将焦点传递给下一个表单元素。< / p>

// 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术语来查找next和previous元素。无论如何，感谢所有帮助我解决这个问题的人。