jQuery的移動滑塊值重置爲最小或最大

我正在使用jquery移動滑塊，並且當輸入到控件的文本部分的值超出了最小值和最大值的範圍時出現問題我已經設定好了。當控制失去焦點時，它將其值重置爲最小值或最大值，無論哪一個更接近無效輸入值。jQuery的移動滑塊值重置爲最小或最大

我遇到的問題是用戶鍵入的值無效，然後單擊表單提交按鈕，並認爲他們輸入的值已保存。但是，由於單擊提交按鈕後滑塊將值重置爲最小值或最大值，則這是實際保存的值，而不是用戶輸入的值。

如果出現這種情況，我想爲用戶彈出消息，以便他們知道他們輸入了無效值。有沒有人有關於如何實現這一目標的任何建議？測試滑塊的.change事件中的值並不合適，因爲它會返回新重置的值。

任何幫助非常感謝。

示例代碼，如要求：

<script type="text/javascript"> 
    $("#Answer").change(function() { 
    alert($("#Answer").val()); // this value is already the adjusted value, rather than the user entered value 
    }); 
</script> 

<label for="Answer" class="ui-input-text"><%=question.Prompt%></label> 
<br /> 
<span id="sliderspan"> 
    <input style="min-width: 3em;" type="range" name="Answer" id="Answer" value="<%=this.Value%>" min="<%=question.MinimumValue %>" max="<%=question.MaximumValue %>" step="0.1" /> 
    <span>&deg;<%=question.Units.ToString()%></span> 
</span>

來源

2011-10-14 user995680

請編輯您的問題並添加一些示例代碼 –

要做到這一點，我建議綁定到KeyUp事件爲範圍的輸入和保存價值的內部磁場（I輸入自身內使用LastValue），然後綁定到更改事件來比較LastValue與最小/最大值。

$("#Answer") 
    .bind("keyup", function (e) { 
    e.target.LastValue = $(e.target).val(); 
}) 
    .bind("change", function (e) { 
    if (typeof e.target.LastValue == 'undefined') return; 
    var min = parseInt(e.target.min); 
    var max = parseInt(e.target.max); 
    if (e.target.LastValue > max || e.target.LastValue < min) 
     alert("Wrong Data!"); 
});

來源

2011-12-30 07:13:10 Qorbani

我發現綁定到keyup或其他事件（更改等）沒有觸發。我懷疑小部件阻止事件傳播。

在我的情況下，我希望用戶能夠超過最大值，如果用戶在輸入字段中輸入較大的值，滑塊將重置爲最大值。

爲此，我修改了刷新功能的滑蓋代碼（jQuery Mobile的1.4.1），此行之後：

max = isInput ? parseFloat(control.attr("max")) : optionElements.length - 1;

添加以下代碼：

if(control.val() > max) { 
    max = parseFloat(control.val()); 
    control.attr("max", max); 
}

在您的情況然後可以在提交之前檢查輸入的值併發出警告並阻止提交。

順便說一句，如果您想知道如何更改庫代碼，最好的方法是將滑塊小部件摘錄到新文件中，進行更改並在加載jQuery移動版後加載新文件。您的滑塊將覆蓋jQuery移動滑塊，如果您稍後升級jQuery移動設備，滑塊仍然會覆蓋（取決於jQuery的其他更改）。

來源

2014-03-16 23:28:09

jQuery的移動滑塊值重置爲最小或最大

回答

相關問題