Question

我正在使用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>

Answer 1

为此，我建议绑定到Range输入的KeyUp事件并将值存储到内部字段（我在输入中使用LastValue），然后绑定到Change事件以将LastValue与Min / Max值进行比较。

$("#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!");
});

Answer 2

我发现绑定到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 );
}

在您的情况下，您可以在提交之前检查输入的值并发出警告并阻止提交。

BTW如果您想知道如何更改库代码，最好的方法是将滑块小部件摘录到新文件中，进行更改并在加载jquery mobile之后加载新文件。您的滑块将覆盖jQuery移动滑块，如果您稍后升级jQuery mobile，您的滑块仍会覆盖（取决于对jQuery的其他更改）。

jQuery移动滑块值重置为最小值或最大值

2 个答案: