Блог

Я использую ползунок диапазона 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

Тем не менее, я бы хотел, чтобы это вызывало предупреждение только при размытии поля ввода ИЛИ при нажатии клавиши ввода. Я пытаюсь избежать появления предупреждения, просто введя его в поле.

Любые предложения приветствуются.

Итак, я выяснил, что ползунок диапазона, привязанный к вводу, сбрасывал минимальные / максимальные значения, прежде чем я мог вызвать условное оповещение.

С учетом сказанного я обошел это, отключив ползунок перед проверкой правильности ввода, а затем повторно включив и повторно установив ползунок.

Может быть более простой подход, но, похоже, это сработает, если кому-то еще нужно решение.

 $("#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