Javascript造成IE中斷形式

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