微信瀏覽器input常見問題

2022-05-02 08:39:07 字數 1155 閱讀 2656

一、ios端相容input游標高度

input輸入框游標,在安卓手機上顯示沒有問題,但是在蘋果手機上 當點選輸入的時候,游標的高度和父盒子的高度一樣。

原因:通常我們習慣用height屬性設定行間的高度和line-height屬性設定行間的距離(行高),當點選輸入的時候,游標的高度就自動和父盒子的高度一樣了。(谷歌瀏覽器的設計原則,還有一種可能就是當沒有內容的時候游標的高度等於input的line-height的值,當有內容時,游標從input的頂端到文字的底部

解決方法:

高度height和行高line-height內容用padding撐開

二、ios端上下滑動時卡頓,頁面缺失

在ios端,上下滑動頁面時,如果頁面高度超出了一屏,就會出現明顯的卡頓,頁面有部分內容顯示不全的情況,例如下圖,右圖是正常頁面,邊是ios上下滑動後,卡頓導致如左圖下面部分丟失。

原因:解決方法:

只需要在公共樣式加入下面這行** 

*

三、ios鍵盤喚起後收起頁面不歸位

輸入內容,軟鍵盤彈出,頁面內容整體上移,但是鍵盤收起,頁面內容不下滑

原因:固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤佔位 失去焦點的時候軟鍵盤消失 但是還是佔位的 導致input框不能再次輸入 在失去焦點的時候給乙個事件

解決方法:

//input標籤中加上以下**:

changeblur(),

200) } }

四、安卓彈出的鍵盤遮蓋到文字框

解決方法:

給input和textarea標籤新增focus事件,如下,先判斷是不是安卓手機下的操作,當然,可以不用判斷機型,document 物件屬性和方法,settimeout延時0.5秒,因為呼叫安卓鍵盤有一點遲鈍,導致如果不延時處理的話,滾動就失效了

//input標籤中加上以下**:

changefocus(), 500);       

}}

瀏覽器常見問題

瀏覽器核心 現代4大核心 trident 代表作 ie gecko 代表作 mozilla webkit 蘋果 谷歌舊版本 blink 代表作 谷歌 歐鵬 css bug css hack和filter css bug css樣式在各瀏覽器中解析不一致的情況,或者說css樣式在瀏覽器中不能正確顯示的...

微信瀏覽器

編輯 1.登入 當和某個聯絡人聊天時,聊天面板會並列在聯絡人面板的右邊,浮在網頁之上。點選網頁區域,聊天面板會自動收起。點選聯絡人面板右上角的新建聊天按鈕,就可以選擇與單個人聊天,或多個人群聊 在與單個人聊天時 2 點選聊天面板右上角上的 號,可增加其他聯絡人新建群聊 在與多個人群聊時,點選聊天面板...

微信瀏覽器分享

首先說 得配合後台去配置如下紅框的資料,黃框是可以分享到 引入資源 var obj new object ajax type post success function data noncestr obj noncestr signature obj signature wx.ready funct...