手機頁面禁止瀏覽器事件後，彈出鍵盤致使的頁面樣式出錯問題

　　隨着移動端的興起，手機頁面的需求也愈來愈多。

　　而由於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