手机页面禁止浏览器事件后，弹出键盘致使的页面样式出错问题

　　随着移动端的兴起，手机页面的需求也愈来愈多。

　　而由于app的开发费用较高，临时活动项目基本上都是使用wap页面。

　　最近由于需求的日益提升，接触手机触屏事件也愈来愈多（遇到的问题也愈来愈多T_T）。

　　

　　好，下面说说今天遇到的问题及解决办法：

　　需求是一个相似pc端的滚屏效果页面，而平时十分好用的scroll事件在手机端页面的交互不太友好，因此使用了百度来的touchmove事件。

　　使用方法是先用event.preventDefault()禁止浏览器事件（就是这个方法让我吃尽苦头），而后手动添加监听触屏的touch事件。

　　因为技术有限，最终我仍是放弃本身写，而选择了一个应用该原理的插件，touchslider(触屏轮播功能强大，并且简单易用);

　　该插件在触屏轮播上十分强大，本来我是用来作手机轮播图的，可是将其中的一个参数direction设置为up或down后便可模拟成一个滚屏效果^_^;

　　一开始十分顺利，而后遇到问题：

　　需求要求页面上有个文本输入框，点击后会触发弹出手机自身的软键盘，软键盘弹出后将整个页面在浏览器层面往上移动了大约100px，取消焦点，软键盘关闭后，整个页面就维持在向上100px的样式，不返回弹出前的样式了。

　　经测试，应该就是以前禁止浏览器事件的event.preventDefault()所致使，可是整个页面的核心也即在event.preventDefault()，用判断关闭开启也十分容易出错，纠结！

　　百度，瞎蒙了一成天，最后用如下方法实现基本不影响使用：

　　

var t2 = new TouchSlider({
        id: 'slider',
        speed: 800,
	direction: "up",
	auto:false,
	align: "left",
        before: function (index) {
            as[active].className = '';
            active = index;
            as[active].className = 'active';
			$('p').fadeOut();
			//t2.removeListener();
        },
	after: function (index){
	        switch(index){
		  case 0:
			$('.p1').fadeIn(500);
			break;
		  case 1:
			$('.p1').fadeIn(500);
			$(window).scrollTop(-600);//无视上面，起做用的是这一行	
		　　　　　break;
　　　　　　　　　　}
	}
    });

　　原理是将焦点返回浏览器，当用户再次触屏动做时，就会先将浏览器上移的部分还原；

　　scrollTop（-600）是为了将页面停留在第二屏，保持个人页面效果

　　其实应该只要随意触发一个浏览器层面的事件，如scroll之类的，将焦点回到浏览器便可。

　　这只是曲线救国，之后找到正面击败此bug的方法，再行记录，以上。

 

　　2014.12.4更新：

　　找到解决方法：将浏览器滑至顶部的方法：document.body.scrollTop=0; 在输入框失去焦点的时候$().blur里面加上便可

　　须要注意的是，在安卓浏览器关闭软键盘后不会让输入框失去焦点，因此document.body.scrollTop=0;需在滚动或者其余方法里也加入

　　

　　模版世界:http://www.templatesy.com