具有输入警报的基础范围滑块？

问题描述

我正在使用带有有限输入的基础范围滑块。

我想在用户输入的数值大于滑块的最大范围或小于滑块的最小范围时触发警报。

我基本上可以通过以下代码来做到这一点：

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

---

但是，我希望仅在输入字段模糊或按下Enter键时才触发警报。我试图避免仅通过在该字段中键入而弹出警报。

任何建议都将不胜感激。

解决方法

因此，我发现绑定到输入的范围滑块正在重置最小值/最大值，然后才触发条件警报。

话虽如此，我通过在检查输入有效性之前禁用滑块，然后重新启用并重排滑块来解决此问题。

也许有一种更直接的方法，但是如果其他人需要解决方案，这似乎可行。

$("#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 DEMO： https://codepen.io/jinch/pen/oNLEKpR?editors=1010