Question

目标：了解与Javascript相关的IE兼容性问题。

问题：为什么我的Javascript在IE中断，而在其他任何地方（除了“IE糟透了”，哈哈）并且有一个简单的解决方法。

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

然而，在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>

Answer 1

您获取所有输入包括表单输入（卡号等）：

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(){

Answer 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"; 
    }
};

导致IE中的表单中断的Javascript

2 个答案: