Question

我使用范围输入来调整我的Web应用程序中的缩放。我使用一些JavaScript将它与旁边的文本输入同步，这样用户可以在移动滑块时看到值，也可以键入他们想要的值。

＆＃13;

<input type="range" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

＆＃13;

问题是某些浏览器（主要是我想支持的IE9）与范围输入不兼容，因此范围将显示为文本框。这意味着他们会看到两个类似的文本框：

＆＃13;

<input type="text" name="amountRange" min="0" max="20" value="0" onchange="this.nextElementSibling.value=this.value" />
<input type="text" name="amountInput" min="0" max="20" value="0" onchange="this.previousElementSibling.value=this.value" />

＆＃13;

如果浏览器与它们不兼容，我应该如何隐藏范围输入？

Answer 1

Javascript可以检测输入类型，如下所示：

var rangeInput = document.forms.myformname.amountRange;
if (rangeInput.type === 'range') {
  // This browser supports range.
}
else {
  rangeInput.style.display 'none';
}

似乎尝试设置input.type = "somethingIEdoesntunderstand"实际上会导致IE9中的错误;并且所有浏览器都会根据他们所知道的内容过滤可能的类型。

Answer 2

您可以轻松处理所有HTML浏览器不兼容性，并使用 modernizr.js 来利用它们，确保导入库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

然后在IE中检查您的网页，在HTML标记中，您会找到一些以＆＃34; no＆＃34;所有不支持的功能都将以no-HTML-or-CSS开头，您可以使用它来应用您想要的任何样式。

例如：

.no-cssreflections {
            border-radius: 15px;
        }

如果不兼容则隐藏范围输入

2 个答案: