移動端input輸入框失去焦點,頁面視覺回彈,但實際並沒回彈

input輸入框失去焦點,頁面視覺回彈,但實際並沒回彈,添加blur事件

在移動端,當點擊輸入框時,彈出軟鍵盤,頁面被頂上去一截,當輸入完畢失去焦點,軟鍵盤關閉時,頁面彈回彈回恢復正常(這裏關閉軟鍵盤,頁面沒有彈回的參考 https://blog.csdn.net/MtangEr/article/details/86552257 ),但是頁面上的按鈕綁定的一些事件就不能觸發,如點擊事件;
在這裏插入圖片描述在這裏插入圖片描述在這裏插入圖片描述
其中原因是,我們從視覺上看上去頁面彈回。你點擊的也是按鈕的位置,但是實際上,頁面按鈕的位置還是保留在鍵盤彈出,頁面頂上去的那個按鈕的位置(不信不可以操作試試)
這時就需要添加blue事件。

1、jquery 綁定blur事件的寫法
<input type="text"  class=“name”></li>
$(".name").blur(function(){
  	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
});

2.vue 添加綁定blur事件的寫法
<input type="text" @blur="viewDefault" ></li>
viewDefault: function() {
	document.body.scrollTop = 0;
	document.documentElement.scrollTop = 0;
},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章