首页 文章

带有jQuery的HTML5 Range Sliders偶尔不会达到最大值或最小值

提问于
浏览 次
2

我有一个相当简单的表单，其中包含一个HTML5范围元素（呈现为滑块） . 代码看起来像这样：

<form name="redform" id="redform" action="/">
    <input id="id"        name="id"        type="hidden" value="<?php echo $row['id']; ?>" />
    <input id="sliderRed" name="sliderRed" type="range"  value="<?php echo $data[5]; ?>" min="0" max="255" />
</form>
<p class="note">Current value: <span id="redValue">0</span></p>
<div style="text-align:center; color:#FF0000" id="redresults"></div>

伴随这个是一些jQuery，每当移动滑块时执行外部PHP脚本：

$(function(){
    var redValue = $('#redValue');
    $('#sliderRed').change(function(){
        redValue.html(this.value);
    }); 
    $('#sliderRed').mouseup(function(){
        $.post('process.php',  $("#redform").serialize(), function(data) {
            $('#redresults').html(data);
            $('#redresults').fadeIn('slow').delay(2000).fadeOut('slow');
        });
    });
    $('#sliderRed').change();
});

所有这些都有效 . 我可以移动滑块，值更新实时，并在释放滑块时运行PHP脚本 . 这就是奇怪的 . 范围滑块的最大值和最小值设置为0和255.但是，有时，当将滑块一直拖动到一端时，它只会达到1或254.当时似乎没有任何模式有时候是这样的 . 有时它会发挥到最大范围，有时它不能一直走 . 甚至在保持鼠标按住并来回拖动的情况下也是如此 .

如果max和min分别变为256和-1，则观察到类似的行为 . 有时最大值为256，有时最大值为255.在底端，它有时会达到-1，有时它只能被拖到0.这表明它没有与实际数字有关，但有一些奇怪的“一个一个”的错误 .

有什么想法吗？我完全难过了......

jquery html5 input range

3 回答

  • 1

    虽然提供的建议很棒（感谢杰森） . 值得解释为什么这个问题确实发生了 . 我将此作为一个错误提交给铬虫追踪器，认为它可能是一个铬虫 . 我是对的 . 看这里的帖子：http://code.google.com/p/chromium/issues/detail?id=171362

    问题是如果滑块的长度不是至少256像素，那么所有值都不可能被选择 . 使用CSS，您可以将宽度更改为256px，这消除了我在问题中描述的问题 .

    <input id="sliderRed" name="sliderRed" stlye="width:256px;" type="range"  value="<?php echo $data[5]; ?>" min="0" max="255" />

    但是，这种限制使得使用jQuery-UI成为首选解决方案，而我最终可能会实现 .

    回复于
  • 0

    使用setTimeout（）将mouseup回调的执行延迟10毫秒左右 .

    Update ：

    为了澄清，以下代码应该有效 . 我之前遇到过同样的问题，设置一个小延迟解决了这个问题 . （经过进一步反思，我不记得所需延迟的精确持续时间;如果实现此代码，则可能会增加延迟值，并且问题仍然存在 . ）

    $('#sliderRed').mouseup(function() {
    setTimeout(function() {
        $.post('process.php',  $("#redform").serialize(), function(data) {
            $('#redresults').html(data);
            $('#redresults').fadeIn('slow').delay(2000).fadeOut('slow');
        });
    }, 10);
});
    回复于
  • 0

    您可以考虑使用slider object in jQuery UI和"stop"对象以获得更好的性能 . 见this thread .

    回复于

相关问题