2

目的: Javascript 関連の IE 互換性の問題を理解します。

質問:なぜ私の Javascript は IE で壊れて、他の場所では壊れないのですか (「IE がひどい」以外に)、簡単な修正方法はありますか?

詳細:私は、ユーザーが (html ラジオ ボタンを介して) 3 つの支払い方法から選択できる支払いシステムを持っており、Javascript を使用して支払いを完了するための適切なフォームを表示します。クロムとファイアフォックスでは完璧に動作します。

ただし、IE では、最初のラジオ ボタンがクリックされ、Javascript が適切な div を表示すると、カーソルがページの中央下部にジャンプし、ユーザーはフォームの入力ボックスをクリックできなくなります。

ユーザーがボックスを右クリックすると、ボックスにアクセスできますが、簡単ではありません。これを回避するにはさまざまな方法がありますが、IE で問題が発生する原因を理解しようとしています。特に私の側のコーディングが悪い場合。また、既存のコードに簡単な修正があれば、それを聞いてみたいです。

index.phtml 

<form name="payo" action="/paymentAction/" method="post" >
    <div id="tabs"> 
        <div id="nav">
            <input type="radio" name="tab" class="div1" value="Inv" /> Invoice &nbsp;&nbsp;&nbsp;<input type="radio" name="tab" class="div2" value="CC" /> Credit Card &nbsp;&nbsp;&nbsp;<input type="radio" name="tab" class="div3" value="Cpn"/> Coupon                                
        </div>

        <div id="div1" class="tab">
            <!-- INVOICE TEXT -->
        </div>

        <div id="div2" class="tab">
            <!-- CREDIT CARD FORM -->
            Credit Card Number: <input type=text name="CardNo" placeHolder="Credit Card Number" value="" maxlength="16"> 
            Expiration Month / Year: <font color="red">* </font> 
            <select name="ExpMonth">
                <option value=""selected>mm</option>
                <option >01</option>
                <option >02</option>
                <option >03</option>
            </select>
            <select name ="ExpYear">
                <option value=""selected>yy</option>
                <option >12</option>
                <option >13</option>
                <option >14</option>
            </select>
            Street Address Associated With Card: <input type=text name="Address" placeHolder="Address" value="">
        </div>

        <div id="div3" class="tab">
            <!-- COUPON FORM -->
            Coupon Code: 
            <input type="text" name="cpA" size=4 maxlength=4 > -
            <input type="text" name="cpnB" size=6 maxlength=6> -
            <input type="text" name="cpnC" size=5  maxlength=5>
            <br />
        </div>    

        <script type="text/javascript" charset="utf-8">
            (function(){
                var tabs =document.getElementById('tabs');
                var nav = tabs.getElementsByTagName('input');

                function hideTabs(){
                    document.getElementById('div1').style.display = "none";
                    document.getElementById('div2').style.display = "none";
                    document.getElementById('div3').style.display = "none";
                }

                function showTab(tab){
                    document.getElementById(tab).className = 'tab';
                }

                hideTabs(); 

                for(var i=0;i<nav.length;i++){
                    nav[i].onclick = function(){
                        hideTabs();

                        var radios = document.getElementsByName('tab');
                        for (var i = 0, length = radios.length; i < length; i++) {
                            if (radios[i].checked) {
                                var here = i;
                            }
                        }        
                        if (radios[here].value == "Inv") {   
                            document.getElementById('div1').style.display = "block";     
                        } else if(radios[here].value == "CC") {
                            document.getElementById('div2').style.display = "block"; 
                        } else if(radios[here].value == "Cpn") {
                            document.getElementById('div3').style.display = "block"; 
                        } else {

                        }    
                    }
                }
            })();
        </script>                              
        <div id="formdiv">
            <center><input type=submit name="submit" class="ButtonMain" value=" Authorize Payment "></center>
            <br />
        </div>
</form>
</div>
4

2 に答える 2

4

フォーム入力 (カード番号など)を含むすべての入力をフェッチします。

var nav = tabs.getElementsByTagName('input');

次にonclick、最初にタブを非表示にしてから再表示する をそれぞれに割り当てます。そのため、入力がクリックされるたびに、フォーカスがすぐに失われます。

Chrome は目立つことは何もせず、要素のフォーカスを復元します。IE はそれをリセットするため、要素は事実上キャプチャできなくなります。

ラジオ ボタンがクリックされたときのタブの変更のみを管理する必要があります。

var radios = document.getElementsByName('tab');
for(var i=0;i<radios.length;i++){
   radios[i].onclick = function(){
于 2013-01-07T15:44:05.667 に答える
2

問題は次のようになります。

var nav = tabs.getElementsByTagName('input');

navラジオボタンだけでなく、テキスト入力ボックスも含まれているため、onclick関数を配列のすべての要素にアタッチするnavと、カーソルが飛び回るという問題が発生します。div id="nav"最も簡単で簡単な解決策は、要素内のラジオ ボタンのみに制限することです。

var nav = document.getElementById('nav').getElementsByTagName('input');

問題を修正する必要はありませんが、javascript は不要になったため、少し単純化することもできradiosます。onclick関数内では、thisクリックされたラジオ ボタンが参照されるため、簡略化できます。

nav[i].onclick = function(){
    hideTabs();
    var radios = document.getElementsByName('tab');
    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            var here = i;
        }
    }        
    if (radios[here].value == "Inv") {   
        document.getElementById('div1').style.display = "block";     
    } else if(radios[here].value == "CC") {
        document.getElementById('div2').style.display = "block"; 
    } else if(radios[here].value == "Cpn") {
        document.getElementById('div3').style.display = "block"; 
    } else {

    }
}

に：

nav[i].onclick = function(){
    hideTabs();

    if (this.value == "Inv") {   
        document.getElementById('div1').style.display = "block";     
    } else if(this.value == "CC") {
        document.getElementById('div2').style.display = "block"; 
    } else if(this.value == "Cpn") {
        document.getElementById('div3').style.display = "block"; 
    }
};
于 2013-01-07T16:12:35.297 に答える