是否有一个轻量级的跨浏览器范围输入解决方案，不需要像 jQuery 这样的库

Posted 2023-02-25

【中文标题】是否有一个轻量级的跨浏览器范围输入解决方案，不需要像 jQuery 这样的库

【英文标题】：Is there a lightweight cross-browser range input solution without any need of libraries like jQuery

【发布时间】：2014-04-18 09:57:05

【问题描述】：

我正在为跨浏览器范围输入寻找一个非常轻量级的解决方案。我想避免使用任何 javascript 库，例如 jQuery，这远远超出了我的需要。

我需要能够支持 Internet Explorer 8 等旧版浏览器。

【参考方案1】：

有范围输入，它是 html5 并且大多数现代浏览器都支持：

<input type="range"/>

这里是完整的文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

但是，如果您想完全兼容，您可能必须坚持使用库解决方案。

【讨论】：

谢谢 .. 抱歉，我没有写出跨浏览器的意思。我还想支持 Internet Explorer 到 IE8。

@user1030151 不要忘记，不支持范围输入类型的浏览器将简单地回退到输入类型 =“文本” - 所以这是“渐进增强”的一个很好的例子，其中用户的浏览器确实支持它获得额外的功能，而不会破坏旧版浏览器的站点。尽管如此，您仍然可以在旧版浏览器中填充支持，有关详细信息，请参阅我的答案。

【参考方案2】：

不要通过无条件加载 JavaScript 库来复制原生功能来惩罚大多数使用现代 HTML 5 标准兼容浏览器的用户 - 使用 HTML 5 范围输入，然后使用 @ 987654321@ 和 polyfill 为那些本身不支持范围输入类型的浏览器提供支持。

如果您想保持轻量级，那么我强烈建议您使用出色的 YepNope conditional loading library 并根据 Dive Into HTML5 页面进行测试，例如-

function detectsRange() 
   var testElement = document.createElement('input');
   testElement.setAttribute('type', 'range');
   return (testElement.type === 'range');

如果您不想自己检测功能，您可以使用广受好评的Modernizr library 来检测对许多 HTML5 和 CSS3 功能的支持。

Modernizr 和 YepNope 都允许您有条件地加载像 jQuery tools Range Input 这样的脚本（以及您可能尚未使用的任何先决条件，如 jQuery），这意味着只有那些使用不受支持的浏览器的用户需要下载任何东西。

【讨论】：

顺便说一下，YepNope 库不需要 jQuery 来运行，因为您明确将其列为一个您希望不必须依赖的库。大多数 polyfill 或 JavaScript 替换可能需要它，加强条件加载的情况。