如何解决输入类型范围显示文本框而不是滑块
| 这是我的代码:<input type=\"range\" name=\"slider\" id=\"slider\" value=\"5\" min=\"0\" max=\"10\" step=\"1\" />
我在(iPhone 4,Android,iPad)中测试过的所有HTML5移动浏览器都将此渲染为输入type = text。为什么不渲染滑块?
解决方法
并非所有浏览器都支持它。您始终可以使用http://www.modernizr.com/来测试浏览器是否支持它,然后使用http://jqueryui.com/作为后备。尝试这样的事情。
var initSlider = function() {
$(\'input[type=range]\').each(function() {
var $input = $(this);
var $slider = $(\'<div id=\"\' + $input.attr(\'id\') + \'\" class=\"\' + $input.attr(\'class\') + \'\"></div>\');
var step = $input.attr(\'step\');
$input.after($slider).hide();
$slider.slider({
min: $input.attr(\'min\'),max: $input.attr(\'max\'),step: $input.attr(\'step\'),change: function(e,ui) {
$(this).val(ui.value);
}
});
});
};
,根据这篇文章,它没有在iOS 4.2中实现,也没有在Android 2.3中完全实现(无论如何)。我曾在iOS 4.3上进行过测试,但看起来仍未针对移动Safari实施。
<input type=\"number\"
似乎也不起作用。
,此后,在iOS 5中添加了对输入type = \“ range \”的支持,因此您将在iOS 5中获得滑块,但之前没有。
,基于Modernizr,测试输入类型=“范围”兼容性的最佳方法是:
var i = document.createElement(\"input\"),safe = false;
i.setAttribute(\"type\",\"range\");
if(i.type !== \"text\"){
i.value = \':)\';
i.style.cssText = \'position:absolute;visibility:hidden;\';
if (i.style.WebkitAppearance !== undefined ) {
document.documentElement.appendChild(i);
defaultView = document.defaultView;
safe = defaultView.getComputedStyle &&
defaultView.getComputedStyle(i,null).WebkitAppearance !== \'textfield\' &&
(i.offsetHeight !== 0);
document.documentElement.removeChild(i);
}
}
return safe? \'<input type=\"range\" />\': \'<input type=\"number\" />\';
希望能帮助到你。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。