如何构建优雅降级的 HTML5 Range?

2024-01-02

我想使用<input type='range' />从支持 HTML5 的浏览器降级为<select />如果不。我正在使用 Ruby-on-Rails,所以如果一切都失败了,我可以做类似的事情this http://gist.github.com/301697在服务器端。

不过,我更希望有一些更符合通过 Javascript 进行渐进增强的想法。如果是 JQuery,那就加分了。


查看现代化 http://www.modernizr.com,它会告诉您是否支持范围。我相信该技术是创建一个范围输入并检查它的类型 - 如果它仍然是“范围”,那么它是受支持的。否则它应该报告“文本”,这是其他浏览器中的后备。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何构建优雅降级的 HTML5 Range? 的相关文章

  • 如何改变HTML5视频的播放速度?

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 如何滚动到div内的元素?

    我有一个滚动的div我想在点击它时发生一个事件 它会强制执行此操作div滚动以查看内部元素 我写的JavasCript是这样的 document getElementById chr scrollIntoView true 但这会在滚动时滚
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 选中复选框时提交表单

    有没有办法在选中复选框时提交表单
  • 使用 Paperclip 保存文件而不上传

    我有一个简短的问题 是否可以保存文件而不实际通过表单上传 例如 假设我正在查看电子邮件中的附件 并且我想使用回形针保存它们 我该怎么做呢 我是否必须在某处手动调用 save file 或类似的东西 任何帮助将非常感激 我有一个 rake 任
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • jQuery 选择下一个

    我有一个简单的div布局html 有一个函数 当鼠标悬停在className为 personal icon email 的div上时 我将调用JS函数并显示className为 img info mask 的隐藏div div class
  • 是否可以使用打字稿映射类型来创建接口的非函数属性类型?

    所以我正在研究 Typescript 的映射类型 是否可以创建一个接口来包装另一种类型 从而从原始类型中删除函数 例如 interface Person name string age number speak void type Data
  • jquery:当我在文档上附加一层时,如何重置文档滚动条?

    当我在文档上附加图层时 如何重置文档滚动条 例如 它就像 Facebook 页面 当您有一个很长的文档时 您需要向下滚动才能查看较旧的图像 帖子 当你点击照片时 滚动条发生了变化 从顶部开始 但文档页面根本不跳转 当关闭照片查看器图层时 滚
  • 使用 html5 分块上传文件

    我正在尝试使用 html5 的文件 API 分块上传文件 然后在服务器端用 php 重新组装它 我正在上传视频 但是当我在服务器端合并文件时 大小增加了 并且它变成了无效文件 请注意 以下 html5 代码仅适用于 chrome 浏览器 在
  • 如何让 Twilio 在hangup() 被触发时停止拨号?

    我一直在使用 twilio ruby gem 开发 Twilio 应用程序 但我陷入了一个部分 为呼叫构建 TwiML 响应 我拨打一些号码 以便他们也可以接听呼叫 def handle gather response Twilio Twi
  • ES6 模板文字的延迟执行

    我正在玩新的ES6 模板文字 http tc39wiki calculist org es6 template strings 我首先想到的是String format对于 JavaScript 所以我开始实现一个原型 String pro
  • ng-model 和值组合不适用于输入文本框

    我有两个输入文本框 我需要组合在两个文本框中输入的值并将其显示在第三个文本框中 如果我只使用value在第三个文本框中 Box 1
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • 当选择下拉列表中的某些值时,取消选中复选框

    当我从下拉列表中选择某个值或用户未从下拉列表中选择任何值时 我需要取消选中复选框 我现在正在使用 Jquery 这是我现在使用的代码 但它不起作用 Script
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li
  • Bootstrap 3 / 显示模式不适用于 javascript 方式

    我用Modal http getbootstrap com javascript modalsBootstrap 3 0 的功能 我有这个代码 a href myNestedContent Open the modal containing
  • 以 Rails 形式处理 MongoMapper EmbeddedDocument

    首先 我对一般编程和 Rails 都是新手 我选择 Rails 是因为它看起来是一种很容易上手的语言 对于我的项目 我将 MongoMapper 与 Rails 结合使用 我正在尝试以与文档相同的形式处理嵌入文档 我有以下模型 class

随机推荐

  • 将主键int类型更改为serial

    有没有办法在不删除表的情况下将现有主键类型从 int 更改为串行 我表里已经有很多数据了 我不想删除它 将 int 转换为序列或多或少仅意味着向值添加序列默认值 http www postgresql org docs 9 3 static
  • Kubernetes POD 参数未传递到服务,但 Docker 参数正确传递

    问题陈述 我已经成功创建了一个 Docker 镜像docker io joethecoder2 spring boot web 它已经使用命令行参数进行了测试 并且这些参数可以在 Docker 本地正常工作 我正在尝试将传递给 Docker
  • 推送视图应以透明背景显示

    我只是从一种观点推论另一种观点 在此代码之后 推送的视图将显示为透明 我之前已经用过很多次了 就这么简单 settings set settings alloc initWithNibName settings bundle nil set
  • req.body 无法作为数组读取

    我正在使用 node js 接收发布请求 请求正文在使用打印后具有此内容console log object 1 deviceType iPad Retina guid DF1121F9 FE66 4772 BE74 42936F1357F
  • 添加锚点到 RedirectToAction 结果?

    我正在尝试创建一个类似于的扩展方法MVCContrib 的 RedirectToAction 方法 http mvccontrib codeplex com SourceControl changeset view c0a43d6843a7
  • iOS Foundation:系统字体大小

    我想知道iOS应用程序tableView中的systemFontSize是否是always文本标签也一样吗 这是取决于风格 例如当我NSLog f UIFont systemFontSize 我已经14 0了这总是一样的吗 更重要的是 如何
  • 创建具有多个选项的 Python 函数的最佳方法?

    我定义了一堆自定义函数 并发现其中很多包含一些相同或相似的代码块 例如 仅包含略有不同的字符串或参数 所以像这样 def func1 a b c some identical code some similar code more iden
  • 有没有办法将 Linux 管道设置为非缓冲或行缓冲?

    我的程序正在控制 Linux 上的外部应用程序 通过管道将输入命令传递到外部应用程序 stdin 并通过管道从外部应用程序 stdout 读取输出结果 问题在于 对管道的写入是按块缓冲的 而不是按行缓冲的 因此在我的应用程序接收外部应用程序
  • 如何在 Bigquery 中查询多个 Firebase 项目?

    如何放置 Select 查询以从多个 Firebase 项目中提取数据 如何在单个查询中查询 abc 项目和 xyz 项目 目前 我正在放置两个查询来从项目 abc 和 xyz 及其数据集表中提取数据 查询abc项目 SELECT app
  • 如何使用低级 8 位标志作为条件?

    在我的键盘钩子中 每次按键都会有一个标志 表明它是否被注入 http msdn microsoft com en us library ms644967 VS 85 aspx http msdn microsoft com en us li
  • 2d std::vector 连续内存?

    考虑下面的代码 它分配了一个 2dstd vector
  • chmod 757 安全吗?

    由于我在共享主机上 我想添加一个图像托管脚本 似乎755不允许我上传图像 所以我将文件夹更改为757 chmod到757安全吗 一句话 不 用两个字来说 见鬼 不 让我们解释一下757 那就是 所有者 读写执行 对文件具有权限的组 读取 执
  • 在 MS Access 中插入具有日期范围的多条记录

    希望有人可以帮忙吗 我对 Access 2016 还很陌生 我的任务是为我们学校的早餐和课后俱乐部构建一个非常简单的预订系统 我有一个包含儿童列表的表 主键是 ChildID 另一个表 CLUBS 列出了 5 个可用的俱乐部 第三个表 BO
  • 使用 Castle.Windsor 设置 FluentValidation 时出现问题

    我有一个 asp net MVC 4 5 应用程序 使用 Castle Windsor 3 2 2 作为 DI 我第一次尝试添加 FluentValidation 版本 5 0 0 1 我创建了继承自 ValidatorFactoryBas
  • 为什么使用引用限定符 & 声明删除的赋值运算符

    据我所知 用户声明的赋值运算符与内置运算符不同 如所解释的这个 stackoverflow 答案 https stackoverflow com a 16995559 3054219 但是为什么要在已删除的运算符中添加 呢 C class
  • 如何在跑步时更改 Google 地图的语言?

    我不想反转地理编码并获取两种语言 阿拉伯语和英语 的地址 因此我想获取一种语言的地址 然后更改 API 的语言并获取另一种语言的地址 因为我找不到参数发送到地理编码器以确定语言 有什么建议么 加载 API 时可以通过附加来选择语言langu
  • c# 删除多余空格的最快方法

    将多余的空格替换为一个空格的最快方法是什么 e g from foo bar to foo bar 最快的方法 迭代字符串并在 a 中构建第二个副本StringBuilder一个字符一个字符 每组空格只复制一个空格 越容易打字Replace
  • 在 WebView 中使用 Stripe Mobile Checkout / 在 Kik 中使用 Payments

    我正在尝试实施 Stripe Checkout 以在 Kik 浏览器中接受移动支付 但不幸的是 在尝试加载 Checkout 时出现以下错误 抱歉 加载 Checkout 时出现问题 如果这种情况仍然存在 请尝试使用其他浏览器 尝试创建自定
  • Google 幻灯片:找不到新插入的表格

    我想知道发生了什么事 我有两个函数 当一一调用时 它们都运行良好 function createTable var slidesPage SlidesApp openById 1QWRV4eQzGNNBz4SkR3WPurTL3O60oGY
  • 如何构建优雅降级的 HTML5 Range?

    我想使用