javascript - 更改最大值后输入范围拇指不刷新

Question

设置 input type="range"范围缩略图的 max 属性后不重绘。

更改最大值后是否有更新拇指位置的正确方法？

我找到了以下方法:

<input type="range" min="0" max="100" value="50" />

var $i = $('input[type="range"]');
$i.attr('max', 200);
// hack to redraw thumb position
$i.val(0);$i.val(50);

示例:http://jsfiddle.net/mJQx9/

Answer 1

我相信您可能在基于 WebKit 的浏览器(或至少在 Chrome)中偶然发现了一个错误。

如果我们首先考虑到 WebKit will not dispatch the 'DOMAttrModified' event因此求助于跨浏览器工作的 DOMSubtreeModified 事件，很容易看出在 Chrome/WebKit 中更新 max 属性时没有触发任何 DOM 事件。这是一个 fiddle :

http://jsfiddle.net/mJQx9/5/

在不同的浏览器(例如 IE11)中运行相同的示例，您会发现 DOMSubtreeModified 事件按预期触发(更重要的是，元素按预期自动重绘)。

此外，您还可以发现更改其他属性的值，例如 name，将导致 DOMSubtreeModified 事件在 WebKit/Chrome 中触发。如果在分配新值之前完全删除 max 属性，您将从 WebKit/Chrome 获得两个 DOMSubtreeModified 事件；一种用于删除属性，另一种用于分配新值。更糟的是，即使 DOMSubtreeModified 事件触发，元素仍然不会重绘(在 WebKit/Chrome 中)。所以看起来好像这里有几个错误:

1. WebKit/Chrome 未正确检测和报告对 max 属性值的更改。
2. WebKit/Chrome 不会在所有应该重绘的情况下重绘元素。

这似乎是个问题，因为人们会凭直觉期望浏览器检测到此类更改，并在任何会影响其当前外观的状态更改时自动重绘元素。然而，有可能是 HTML5 规范在这些点上没有实际意义，或者 WebKit/Chrome 实际上遵循了对规范的一些严格解释。在这种情况下，会有一大群 Nerd 来解释 WebKit/Chrome 令人困惑的行为实际上是“正确的”，并指责我建议浏览器应该做一些技术上不符合规范的直观事情。

无论如何，就此问题的实际解决方案而言，我认为您目前受困于 hacks。你得到的并不可怕，尽管你可以采纳 PushOk 的建议，并向 jQuery 添加一个 redraw() 函数。像这样的东西:

$.fn.redraw = function(){
    $(this).each(function(){
        if (this.value && ! isNaN(parseInt(this.value, 10))) {
            this.value++;
            this.value--;
        }
    });
};


$i.attr('max', 200);                

// hack to redraw thumb position
$i.redraw();

...或者如果您真的不喜欢每次更改内容时都必须记住调用 redraw() ，您可以跳过一些额外的环节并执行接受的答案中讨论的内容here设置一个事件监听器，将 检测属性更改。这将允许您在事件监听器中调用单个 redraw()，而不是在修改 max 属性的每个地方调用一个。