如何解决具有输入警报的基础范围滑块?
我正在使用带有有限输入的基础范围滑块。
我想在用户输入的数值大于滑块的最大范围或小于滑块的最小范围时触发警报。
我基本上可以通过以下代码来做到这一点:
$("#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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。