2

Objective:了解一个Javascript相关的IE兼容性问题。

问题：为什么我的 Javascript 会在 IE 中中断而其他任何地方都没有（除了“IE 糟透了”，哈哈），是否有一个简单的修复方法。

详细信息：我有一个支付系统，允许用户在 3 种支付方式（通过 html 单选按钮）之间进行选择，并使用 Javascript 显示适当的表单以完成支付。在 chorme 和 firefox 中，它可以完美运行。

然而，在 IE 中，一旦单击初始单选按钮并且 Javascript 显示适当的 div，光标就会跳到页面的中下部，并且用户无法单击表单中的任何输入框。

如果用户右键单击它们，则可以到达这些框，但并不容易。有多种方法可以解决这个问题，但我试图了解导致IE 问题的原因。特别是如果我的编码很糟糕。此外，如果对现有代码有一个简单的修复，我会很想听听它。

索引.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 回答