#jquery #input #slider #alert #foundation
#jquery #ввод #ползунок #zurb-foundation #предупреждение
Вопрос:
Я использую ползунок диапазона foundation с привязанным вводом.
Я хотел бы вызвать предупреждение, «если» пользователь вводит числовое значение во входных данных, которое больше максимального или меньше минимального диапазона ползунка.
Я смог сделать это по большей части с помощью кода:
$("#slideInput").on('blur keyup', function() {
if ($(this).val() > 40 || $(this).val() < 4) {
alert('you have reached a limit');
}
});
ДЕМОНСТРАЦИЯ CODEPEN:
https://codepen.io/jinch/pen/JjKWxOQ?editors=0010
Тем не менее, я бы хотел, чтобы это вызывало предупреждение только при размытии поля ввода ИЛИ при нажатии клавиши ввода. Я пытаюсь избежать появления предупреждения, просто введя его в поле.
Любые предложения приветствуются.
Ответ №1:
Итак, я выяснил, что ползунок диапазона, привязанный к вводу, сбрасывал минимальные / максимальные значения, прежде чем я мог вызвать условное оповещение.
С учетом сказанного я обошел это, отключив ползунок перед проверкой правильности ввода, а затем повторно включив и повторно установив ползунок.
Может быть более простой подход, но, похоже, это сработает, если кому-то еще нужно решение.
$("#slideInput1").on('blur keyup', function(e) {
// disable the slider
$(".slider").addClass('disabled');
// keep slider opacity at 100%
$(".slider").css('opacity', '1.0');
// condition to track if blur or enter key when inside the input
if (e.type === 'blur' || e.keyCode === 13) {
// check the validity of min/max and alert if invalid
if (!(this).checkValidity()) {
alert('you have reached a limit of input #1');
}
// remove disabled from a slider
$(".slider").removeClass('disabled');
// reflow slider to reset it
$('.slider').foundation('_reflow');
}
});
ДЕМОНСТРАЦИЯ CODEPEN:
https: //codepen.io/jinch/pen/oNLEKpR?editors = 1010