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

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

　　而因为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