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

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

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

原文地址:https://www.cnblogs.com/w2xh/p/4137567.html