样式<输入类型=“范围”>用于重定向,在触摸设备上不起作用
Styled <input type="range"> made to redirect not working on touch devices
我正在尝试制作一个滑块,该滑块在达到特定值时会重定向到另一个URL。代码 http://jsfiddle.net/9vs2n/
.HTML:-
<div id="slide-wrap">
<div id="over">
<div id="overin"></div>
</div>
<input type="range" id="in" class="slideToUnlock" value="0" max="100">
</div>
.CSS:-
body {
color:white;
background: #323232;
margin:0;
padding:0;
}
#over {
width:80%;
border:solid thick rgba(255, 255, 255, 0.5);
margin:0 auto;
padding:0;
height:55px;
display:block;
position:relative;
background:rgba(255, 255, 255, 0.75);
border-bottom-left-radius:1em;
border-top-right-radius:1em;
}
#overin {
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background:#60a917;
width:75px;
height:55px;
display:block;
border-bottom-left-radius:1em;
border-top-right-radius:1em;
}
#in {
outline:none;
-moz-appearance:none;
-webkit-appearance:none;
appearance:none;
width:80%;
margin:0 auto;
margin-top:-55px;
padding:0;
height:55px;
display:block;
position:relative;
background:rgba(0, 0, 0, 0);
}
#overin:before {
color: white;
position:relative;
right:10px;
top: -10px;
width:99%;
font-size: 56px;
font-weight: bold;
content:">";
display:inline-block;
text-align:end;
}
#in::-webkit-slider-thumb {
cursor:pointer;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background:rgba(0, 0, 0, 0);
width:75px;
height:55px;
display:block;
}
#over:before {
content:"slide to continue";
color: white;
position: absolute;
left: 100px;
top: 10px;
z-index: -1;
font-size: 32px;
}
#slide-wrap {
margin:10px auto;
}
JavaScript:-
document.getElementById('in').onmouseup = function () {
var val = document.getElementById('in').value;
if (val >= 50) {
window.location.href = "http://www.example.com/";
} else {
this.value = 0;
zero()
}
}
document.getElementById('in').onmousemove = function () {
enlarge();
}
function enlarge() {
if (document.getElementById('in').value > 10) {
document.getElementById('overin').style.width = document.getElementById('in').value + "%";
}
}
function zero() {
document.getElementById('overin').style.width = '80px';
}
setInterval(loop1(), 1);
function loop1() {
document.getElementById('over').style.width = document.getElementById('in').style.width;
}
它工作正常,但问题是它不适用于触摸设备,我已经在 iPad 上尝试过,请尝试解决此问题。该页面可在 https://dl.dropboxusercontent.com/u/99185097/donotdelete/index.html
很简单。您必须为此添加一些触摸事件。 onmouseup
&onmousestart
只会触发鼠标事件,据我所知,它不适用于触摸屏。您必须添加的事件也是touchmove
和touchend
。这是来自 MDN 的 HTML5 触摸事件的参考链接。
您的代码需要结构化的方式:
var el = document.getElementById('in');
//mouse events
//gave names to the functions bound this, since w'll be using them two times.
el.onmousemove = enlarge;
el.onmouseup = redirect;
//touch events
//check if device has touch screen
// CREDIT : http://stackoverflow.com/a/4819886/1217785
if (is_touch_device()) {
console.log(true);
//onmousemove = touchmove
el.addEventListener("touchmove", enlarge, false)
//onmouseup = touchend
el.addEventListener("touchend", redirect, false)
}
//this function checks whether the device is a touch screen or not, else no binding will be done.
function is_touch_device() {
var isTouch = 'ontouchstart' in window ||
'onmsgesturechange' in window;
console.log(isTouch);
return isTouch;
};
//the rest of your functions
function redirect() {
var val = document.getElementById('in').value;
if (val >= 50) {
window.location.href = "http://www.example.com/";
} else {
this.value = 0;
zero()
}
}
function enlarge() {
if (document.getElementById('in').value > 10) {
document.getElementById('overin').style.width = document.getElementById('in').value + "%";
}
}
//other code
这是更新的演示:http://jsfiddle.net/hungerpain/9vs2n/6/
希望这有帮助!
相关文章:
- 通过javascript重定向html传递php变量
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 使用angular重定向到html页面
- 如何在chrome扩展中重定向到html页面
- 无法从jquery Mobile导航栏重定向到另一个页面
- ng视图外的链接重定向到ng视图内的页面
- 在phonegap应用程序内部重定向不起作用
- CORS-重定向到第二个GET正在接收的页面
- AJAX不会在文件上传后重定向到网页-POST方法
- 重定向时角度刷新浏览器
- 通过链接重定向不;我不在jstree中工作
- 根据select选项元素将表单重定向到不同的URL
- 通过JQuery重定向到另一个页面
- 重定向到“父窗口”
- 重定向iFrame中的父URL
- PHP-如何重定向到同一页面并更改DOM's
- chrome.tabs.update() 重定向到 'chrome-extension://invalid/'
- 我们如何在不更改url的情况下使用锚点点击从一个页面重定向到另一个页面
- 样式<输入类型=“范围”>用于重定向,在触摸设备上不起作用
- 从html5