的Javascript選擇框覆蓋輸入上的Safari

鼠標單擊我有一個輸入，不允許我進入投入。每當我嘗試點擊輸入時，它都會自動跳回到初始選擇輸入。有什麼建議麼？的Javascript選擇框覆蓋輸入上的Safari

HTML：

<h4 class="plan-info-header">Plan info</h4> 
      <label class="plan-name">Plan name: 
       <select id="billing-plan" name="billing-plan" class="selectpicker"> 
        <option>Choose plan</option> 
        <option>Basic</option> 
        <option>Prime</option> 
        <option>Gold</option> 
       </select> 

      <div class="payment-term"> 
       <label>Billing period:</label> 
       <select id="billing-price" name="billing-term" class="selectpicker" disabled> 
        <option value="0">Choose billing term</option> 
       </select> 
       <br> 
       <label>Advertising Budget:</label> 
       <input id="advertising"></input> 

<div class="card-charge-info"> 
Your card will be charged $<span id="payment-total">0</span> now, and your subscription will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime. <!-- <span id="test">XXX</span> --> 
      </div>

的Javascript：

var term = 0; 
var price = 0; 
var additional = 0; 
var fix = 0; 
var plan = document.getElementById('billing-plan'); 
plan.addEventListener('change', enableBilling, false); 
var select = document.getElementById('billing-price'); 
select.addEventListener('change', updatePrice, false); 

function populateBilling(planName) { 
var options = { 
    basic: { 
     "Option" : ["$200/month for 1-yr", "$250/month"], 
     "Value" : [300, 350] 
    }, 
    prime: { 
     "Option" : ["$300/month for 1-yr", "$350/month"], 
     "Value" : [400, 450] 
    }, 
    gold: { 
     "Option" : ["$400/month for 1-yr", "$450/month"], 
     "Value" : [500, 550] 
    } 
} 

//RESET BILLING PERIOD OPTIONS 
select.options.length = 1; 
document.getElementById('payment-total').innerText = 0 + additional; 
document.getElementById('payment-rebill').innerText = 0 + additional; 
var data = options[planName]; 
if (data) { 
    for (var i = 0; i < data.Option.length; i++){ 
     var temp = document.createElement('option'); 
     temp.value = data.Value[i]; 
     temp.text = data.Option[i]; 
     select.appendChild(temp); 
    } 
    } 
} 

function enableBilling(e) { 
    document.getElementById('billing-price').disabled=false; 
    var planName = plan.options[plan.selectedIndex].text.toLowerCase(); 
    populateBilling(planName); 

} 

function updatePrice(e) { 
    price = parseFloat(select.value); 
    fix = 100; 
    if (price == select.options[2].value){ 
     term = 1; 
    } 
    document.getElementById('payment-total').innerText = price + additional; 
    if (price == select.options[2].value){ 
    document.getElementById('payment-rebill').innerText = 0 + additional; 
    } else { 
    document.getElementById('payment-rebill').innerText = price + additional - fix; 
    } 
}

我的jsfiddle：http://jsfiddle.net/aGq9q/17/

來源

2014-02-18 Ryan Salmons

小提琴出現在Chrome的工作。 – Bic

@Bic爲什麼它不會在小提琴中工作的任何原因？它不允許我點擊輸入（高級預算）。它會自動重新選擇計劃名稱選擇框。 –

你使用什麼瀏覽器？你鏈接的測試小提琴對我來說工作得很好。 – Bic

你錯過了在HTML一些關閉標籤。檢查計劃名稱標籤和付款條款div。當你有無效的HTML時，你會從每個瀏覽器得到不同的結果;這完全取決於他們如何反應和解釋它。

<h4 class="plan-info-header">Plan info</h4> 
    <label class="plan-name">Plan name: </label> <!-- tag wasn't closed --> 
    <select id="billing-plan" name="billing-plan" class="selectpicker"> 
     <option>Choose plan</option> 
     <option>Basic</option> 
     <option>Prime</option> 
     <option>Gold</option> 
    </select> 

    <div class="payment-term"> 
     <label>Billing period:</label> 
     <select id="billing-price" name="billing-term" class="selectpicker" disabled> 
      <option value="0">Choose billing term</option> 
     </select> 
     <br> 
     <label>Advertising Budget:</label> 
     <input id="advertising"></input> 
    </div> <!-- wasn't closed --> 

    <div class="card-charge-info"> 
     Your card will be charged $<span id="payment-total">0</span> now, and your subscription  will bill $<span id="payment-rebill">0</span> every month thereafter. You can cancel or change plans anytime. <!-- <span id="test">XXX</span> --> 
    </div>

我在IE中測試，其行爲與Safari相似。這裏是一個更新Fiddle

來源

2014-02-18 19:48:55 Bic

的Javascript選擇框覆蓋輸入上的Safari

回答

相關問題