Значение jQuery для мобильного слайдера сброшено до минимума или максимума - PullRequest
Новая
       18

Значение jQuery для мобильного слайдера сброшено до минимума или максимума

2 голосов
/ 14 октября 2011

Я использую мобильный слайдер 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>

Ответы [ 2 ]

0 голосов
/ 17 марта 2014

Я обнаружил, что привязка к 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 mobile. Ваш слайдер переопределит мобильный слайдер jQuery, и если вы позже обновите jQuery mobile, ваш слайдер все равно будет переопределен (конечно, в зависимости от других изменений в jQuery).

0 голосов
/ 30 декабря 2011

Для этого я предлагаю привязать к событию KeyUp для ввода Range и сохранить значение во внутреннем поле (я использовал 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!");
});
...