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

Hide range input if not compatible

本文关键字：隐藏 范围 输入 如果不 不兼容 如果      更新时间：2023-09-26

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

<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" />

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

<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" />

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

Javascript可以检测输入类型，比如：

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

似乎试图设置input.type = "somethingIEdoesntunderstand"实际上会导致IE9中的错误；所有的浏览器都会过滤出他们所知道的可能的类型。

您可以轻松处理所有html浏览器的不兼容问题，并使用modernizr.js，确保导入库：

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

然后在IE中检查你的网页，在HTML标签中，你会发现一些以单词"no"开头的属性，比如没有画布等等，所有不受支持的功能都将以没有HTML或CSS开头，你可以使用它来应用你想要的任何风格。

示例：

.no-cssreflections {
            border-radius: 15px;
        }
相关文章：