在输入类型范围内禁用跟踪点击 [英] Disable track click on input type range

问题描述

我想在输入类型范围内禁用跟踪单击，仅允许通过拇指拖动。

I want to disable track click on input type range, Only allow drag through thumb.

我能够在除Microsoft Edge和Internet Explorer之外的所有浏览器中做到这一点。

I am able to do it in all browsers except Microsoft Edge and Internet Explorer.

我正在这样做

#slider {
  display: block;
  width: 400px;
  height: 40px;
  margin: 0px auto;
  padding: 5px 10px;
  z-index: 20;
  border-radius: 20px;
  pointer-events: none;
}

#slider::-moz-range-thumb {
  pointer-events: auto !important;
}

#slider::-webkit-slider-thumb {
  pointer-events: auto !important;
}

#slider::-ms-thumb {
  pointer-events: auto !important;
}

#slider::-ms-track {
  pointer-events: none !important;
}

<input id="slider" type="range" value="0" min="0" max="100" autocomplete="off" />

请查看为什么它不起作用在Microsoft Edge和Internet Explorer上，并提出任何可行的方法。

Please see why its not working on Microsoft Edge and Internet Explorer and suggest any possible way to do it.

谢谢

推荐答案

使用jquery
禁用

using jquery to disable

$（ input [name = Range]）。css（ 指针事件，无）；
$（ input [name = Range]）。css（ disabled， disabled）;

$("input[name=Range]").css("pointer-events","none"); $("input[name=Range]").css("disabled","disabled");

正常

$（ input [name = Range]）。css（ pointer-events， auto）;
$（ input [name = amountRange]）。removeAttr（ disabled）;

$("input[name=Range]").css("pointer-events","auto"); $("input[name=amountRange]").removeAttr("disabled");

这篇关于在输入类型范围内禁用跟踪点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！