0

問題:私の HTML サインアップ フォームには、18 個の要素があります。各要素にはタブインデックスがあり、1 で始まる最初のテキスト入力から始まり、18 で最後のフォーム要素まで続きます。

最初のテキスト入力から始めるときは、情報を入力してからタブを押します。. . どこにも行きません。少なくとも、私にはそう見えます。次に、もう一度タブを押すと、テキスト入力に移動しますがtabindex="2"、これがなぜなのかわかりません。1 つのフォーム フィールドに入ると、次のフィールドに移動するには 2 回タブを押す必要があります。

これは、フォームの半分がどのように反応するかです。このフォームは 2 つの列にまたがっています。フォームの左側の部分と右側の部分を分ける要素はありません。もちろん、レイアウトは別として。キッカーは、フォームの右側の部分が正しく動作することです。何を与える？

ここに画像の説明を入力

そして、ここに関連するコードがあります：

<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>

本当に、私が必要としているのは、私がどこを間違えたのかを教えてくれる別の目だけです. ありがとう。

4

1 に答える 1

1

すべての tabindex タグを削除すると、約 90% の作業が完了したことがわかりました。あるフォーム要素から別のフォーム要素に移動する限り、もう問題はありません。

犯人は次のとおりです。

1）同じページに他のフォームがあり、タブインデックスはページごとではなくフォームごとだと思います。

2) Select2 は、置き換える各 select 要素に -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要素を検索する可能性さえあるかもしれません。とにかく、これを理解するのを手伝ってくれたすべての人に感謝します.

于 2013-01-29T16:58:01.293 に答える