Question

当我尝试动态禁用页面中的输入范围时，页面中的所有其他输入元素都停止在chrome中工作。

此处，当我停用#mySlider时，#chkBox和#myButton无法访问，并且不会触发相应的功能，甚至无法选中此复选框。

我的Chrome版本：31.0.1650.63米

HTML

 <input type="range" min="0" max="5" value="0" id="mySlider" onChange="checkMove(this)" />

 <input type="checkbox" value="one" id="chkBox" ><br/>
 <input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />

SCRIPT

function checkMove(elem) {

    var minVal = elem.value;

    if (minVal == 2) {
        elem.disabled = true;
    }
}

function clickCheck() {
    alert("hi")
}

Answer 1

1）因为这似乎是Chrome的一个错误。您可以通过模拟已禁用的输入来破解它，只需将事件更改为onmouseup即可使其生效

/* CSS */

#range {
 position: relative    
}

#range.disabled .cover {
  display: block;
}

#range.disabled input {
 color: rgb(82,82,82);
}

.cover {
 width: 100%;
 height: 100%;
 background: transparent;
 z-index:5;
 position: absolute;
 top: -5px;
 bottom: 0;
 right:0;
 left: 0;
 display: none;
}

<!-- HTML -->
<label id="range">
  <input type="range" min="0" max="5" value="0" id="mySlider" onmouseup="checkMove(this)">
  <div class="cover"></div>
</label>
<input type="checkbox" value="one" id="chkBox">
<br/>
<input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />


// JAVASCRIPT
var range = document.getElementById('range');
function checkMove (elem) {
    var minVal = elem.value;
    console.log(minVal)
    if (minVal >= 2) {
       range.className = 'disabled';
    }
}

Working fiddle

修改

2）另一种破解方法，就是避免动态禁用它，这是首先发生错误的时候。有两个range元素，一个disabled和一个abled。隐藏已禁用的元素，同时镜像来自abled元素的值。
当你想要禁用元素时，根据你的情况切换两个元素。
检查this fiddle，开关是否流畅且不明显。

<div id="range"> <input type="range" min="0" max="5" value="0" id="mySlider" onchange="checkMove(this)"> <input type="range" disabled min="0" max="5" value="0" id="altSlider"> </div> // Javascript var range = document.getElementById('range'), alt = document.getElementById('altSlider'); function checkMove(elem) { var minVal = elem.value; alt.value = minVal; console.log(minVal) if (minVal == 2) { range.className = 'disabled'; } }

CSS：

#range { position: relative; display: inline-block; } #range.disabled #altSlider { opacity: initial; } #range.disabled #mySlider { display: none; } #altSlider { opacity: 0; } #mySlider { z-index:5; position: absolute; top: 0; left: 0; }

Answer 2

为什么不尝试使用jquery选择器来禁用它 Html是 <input type="range" min="0" max="5" value="0" id="mySlider" /> <input type="checkbox" value="one" id="chkBox" ><br/> <input type="button" id="myButton" value="Click Me" />

jquery的

    jQuery(document).ready(function($){

    $("#mySlider").change(function(){
       var val = parseInt($(this).val());
       var maxrange= parseInt($(this).attr("max")); 
       if(val>=2){
        $(this).val(2);
        $(this).attr("disabled", "true");   
        } 
       })

        $("#chkBox, #myButton").click(function(){
          alert("It Works!");
        });

     })

Answer 3

我知道该错误已在chrome中修复...一段时间以来，但是在检查了该错误的原因和解决方案后，我认为我会在需要时提供一种解决方法。

    // Replace the `elem.disabled = true;` with
    setTimeout(function(){ elem.disabled = true; },0);

我们的想法是让浏览器退出当前事件流，然后禁用输入元素。

问题本质上是catch 22，禁用输入，然后在出现最终事件时更新范围，问题是元素现在已被禁用，因此永远不会收到此类事件，因此离开了浏览器挂起，并且从未发布过用户界面。

有关更多详细信息，请查看上方@PrasanthKC在评论中的链接中提供的补丁。

当在chrome中动态禁用输入类型范围时，所有输入元素都停止工作并且似乎无法访问

3 个答案: