Question

我有一个输入，不允许我输入输入。每当我尝试点击输入时，它会自动跳回到初始选择输入。有什么建议吗？

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/

Answer 1

您在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

在Safari中鼠标点击时，Javascript选择框覆盖输入

1 个答案: