Question

HTML5 input range 手机端点击无效

在pc端的时候，range是可以用鼠标点击的，点击哪，滑块就会滑到哪。可是在手机端，点击就无效了，求解决方案。

Answer 1

这个你在手机端，必须要学会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<640){
					$(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);
    	*/

Answer 2

<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>

Answer 3

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