HTML5 input range 手机端点击无效

发布网友

我来回答

共3个回答

热心网友

这个你在手机端，必须要学会touch事件。

下面有段代码，你可以参考下，通过判断touch事件的位置来达到您需要的效果

function imgreset(){
$(this).css3Animate({
width: imgoldw+"px",
//x:0,
//y:0,
time: "0ms",
callback: function () {
pagex1_s=null;pagey1_s=null;pagex2_s=null;pagey2_s=null;pagex1_e=null;pagey1_e=null;
pagex2_e=null;pagey2_e=null;pagexm1_s=null;pageym1_s=null;pagexm1_e=null;pageym1_e=null;
dm=0;dn=0;
imgneww=imgoldw
}
                 });
}
var imgoldw=320;//获取图片寛度
var imglength=$(".imgbox").length;//获取图片个数
var demos = document.getElementById("container"),
        spirit, startScale, startRotation;
var dm=0,dn=0,imgneww=imgoldw,ismove=false,pic_c=0;
var body_w=$("body").width();
var body_h=$("body").height();
var pagex1_s,pagey1_s,pagex2_s,pagey2_s,pagex1_e,pagey1_e,pagex2_e,pagey2_e,pagexm1_s,pageym1_s,pagexm1_e,pageym1_e;
    function touchStart(e) {
//e.stopPropagation();
        e.preventDefault();
if(e.touches.length == 1){
ismove=true;
 var touch1 = e.touches[0];
            pagexm1_s = touch1.pageX;
            pageym1_s = touch1.pageY;

}
        if (e.touches.length == 2){

var touch1 = e.touches[0];
            pagex1_s = touch1.pageX;
            pagey1_s = touch1.pageY;
var touch2 = e.touches[1];
pagex2_s = touch2.pageX;
pagey2_s = touch2.pageY;
left = Math.min(pagex1_s, pagex2_s),
top = Math.min(pagey1_s, pagey2_s),
width = Math.abs(pagex1_s - pagex2_s),
height = Math.abs(pagey1_s - pagey2_s);
}
       
    }
function touchMove(e){
//e.stopPropagation();
e.preventDefault();
if (ismove&&e.touches.length == 1){
//单点触摸

var touch1 = e.touches[0],
pagexm1_e = touch1.pageX,
pageym1_e = touch1.pageY,

//移动了多少
dx=pagexm1_e-pagexm1_s,
dy=pageym1_e-pageym1_s;
//是多少
dm=dx+dm;
dn=dy+dn;

if(imgneww==imgoldw){

$(this).css3Animate({
x:dm,
//y:dn,
time: "0ms",
callback: function () {
}
                });

//如果图未放大，则执行翻页
}else{
//如果图片已经被放大，则可以拖动
$(this).css3Animate({
x:dm,
y:dn,
time: "0ms",
callback: function () {
//记录新位置
}
                });
}
pagexm1_s=pagexm1_e,pageym1_s=pageym1_e;
}
if (e.touches.length == 2){
//多点触摸
var touch1 = e.touches[0];
            pagex1_e = touch1.pageX;
            pagey1_e = touch1.pageY;
        var touch2 = e.touches[1];
            pagex2_e = touch2.pageX;
            pagey2_e = touch2.pageY;
//计算两点开始距离 old
var oldx=Math.abs(pagex1_s-pagex2_s),
oldy=Math.abs(pagey1_s-pagey2_s),
//计算两点开始距离 new
newx=Math.abs(pagex1_e-pagex2_e),
newy=Math.abs(pagey1_e-pagey2_e);

if(oldx>newx&&oldy>newy){
var imgw=$(this).width();//获取图片寛度
resizex=oldx-newx;//缩小多少
var resizey=oldy-newy;//缩小多少
if(imgw>imgoldw){
$(this).css3Animate({
width: imgneww-resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
                    });
imgneww=imgneww-resizex;
};
}else{

var imgw=$(this).width();//获取图片寛度
var resizex=Math.abs(oldx-newx);
var resizey=Math.abs(oldy-newy);//缩小多少
if(imgw<0){
$(this).css3Animate({
width: imgneww+resizex+"px",
x:dm,
y:dn,
time: "0ms",
callback: function () {
}
                    });
imgneww=imgneww+resizex;
}
} 
}
 
pagex1_s=pagex1_e,pagey1_s=pagey1_e,pagex2_s=pagex2_e,pagey2_s=pagey2_e;

}

function touchEnd(e) {
e.preventDefault();
var imglength=$(".imgbox").length;
var id=parseInt($(this).attr("id").substr(9));
if(ismove&&imgneww==imgoldw&&dm<0&&Math.abs(dm)>body_w/2&&id!=imglength-1){

$.ui.loadDiv('#my_photos_'+(id+1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});

}else if(ismove&&imgneww==imgoldw&&dm>0&&Math.abs(dm)>body_w/2&&id!=0){
$.ui.loadDiv('#my_photos_'+(id-1),false,false,'flip');
$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}else{
if(ismove&&imgneww==imgoldw){

$(this).css3Animate({
x:0,
time: "0ms",
callback: function () {
dm=0;
}
});
}

}
       ismove=false;

    }

function gestureEnd(e) {
        e.preventDefault();
        if (!spirit) return;
        canvas.removeChild(spirit);
        spirit = null;
        startScale = null;
        startRotation = null;
    }
/*$(".imgbox img").bind("touchstart", touchStart, false);
$(".imgbox img").bind("touchmove", touchMove, false);
$(".imgbox img").bind("touchend", touchEnd, false);
$(".imgbox img").bind("gestureend", gestureEnd, false);
$(".imgbox img").bind("tap", imgreset, false);
    */

热心网友

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文哥讨厌IE</title>
<script language="javascript" type="text/javascript">

function checkMobile(str) {
if(str==""){
alert("手机号不能为空！");
}
else{
var re = /^1\d{10}$/
if (re.test(str)) {
alert("正确");
} else {
alert("手机号格式错误！");
}
}
}
</script>
</head>
<body>
<input type="text" id="btn_getNum"/>
<input type="button" value="得到数字" onclick="checkMobile(btn_getNum.value);"/>
</body>
</html>

热心网友

在手机端获得focus的时候可能有问题