Question

设置输入类型的最大属性=＆＃34;范围＆＃34;范围拇指不会重绘。

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

我发现了以下方式：

<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事件，那么很容易看出没有触发任何DOM事件更新Chrome / WebKit中的max属性时。这是一个小提琴：

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

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

此外，您还可以发现更改其他属性（例如name）的值会导致DOMSubtreeModified事件在WebKit / Chrome中触发。如果您在分配新值之前完全删除max属性，则会从WebKit / Chrome获得两个DOMSubtreeModified个事件。一个用于删除属性，另一个用于分配新值。为了进一步混淆水域，即使DOMSubtreeModified事件触发，该元素仍然不会重绘（在WebKit / Chrome中）。所以看起来好像有几个错误：

WebKit / Chrome无法正确检测并报告max属性值的更改。
WebKit / Chrome不会在所有情况下重绘元素。

这似乎是一个问题，因为人们会直观地期望浏览器检测到这样的更改，并在任何状态发生变化时自动重绘元素，这会影响其当前外观。但是，有可能HTML5规范在这些点上没有实际意义，或者WebKit / Chrome实际上是遵循规范的一些严格解释。在这种情况下，有一大群学生来解释WebKit / Chrome的混乱行为实际上是如何正确的＃34;并将我钉在十字架上，建议浏览器做一个不符合技术要求的直观内容。

无论如何，就这个问题的实际解决方案而言，我认为你现在已经陷入困境。虽然您可以采用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属性的地方进行调用。

Answer 2

var $i = $('input[type="range"]');
$i.attr('max', 200);

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
};

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

http://jsfiddle.net/mJQx9/

更改最大值后，输入范围缩略图不会刷新

2 个答案: