1. 程式人生 > >移動web開發 手機輸入框彈出的問題

移動web開發 手機輸入框彈出的問題

在移動web開發中和pc端不同的是,手機的輸入是軟鍵盤,這樣就會有個問題,那就是當有輸入的時候,鍵盤彈起來,整個頁面難免會發生變化

1、頁面提高背景會出現不夠用的現象,

解決方法,在body中設定背景圖,即便是頁面擡升了,背景也依舊存在,

2、底部用fix佈局

 這個問題會使得頁面提升而底部的fix也跟著提升,遮蓋住相應的頁面,這個有兩種解決方法

一、是頁面頁相應的提高,頁面變化多少我們讓上面的頁面滾動多少,

$('input').bind('click',function(e){
    var $this = $(this);
    e.preventDefault();
    setTimeout(function(){
        $(window).scrollTop($this.offset().top - 10);
    },200)
})

$this.offset().top 是input 元素的高度,將window滾動到要輸入的input的位置
二、把fix元素隱藏掉當頁面輸入完成再展示出來

var original = document.documentElement.clientHeight;
window.addEventListener("resize", function() {
var resizeHeight = document.documentElement.clientHeight;
if(resizeHeight != original) {
$('.bottom-button').css('display', 'none');
} else {
$('.bottom-button').css('display', 'block');
}
});

利用resize屬性,當手機輸入框彈出時,頁面螢幕會變形,resize就會執行,我們先獲取原來的高度,當發生變化時我們獲取現在的頁面高度,當頁面高度不一樣的時候就隱藏元素,

相關推薦

移動web開發 手機輸入的問題

在移動web開發中和pc端不同的是,手機的輸入是軟鍵盤,這樣就會有個問題,那就是當有輸入的時候,鍵盤彈起來,整個頁面難免會發生變化 1、頁面提高背景會出現不夠用的現象, 解決方法,在body中設定背景圖,即便是頁面擡升了,背景也依舊存在, 2、底部用fix佈局  這個問題會

移動端點選input輸入數字鍵盤

<input type="number" name="num" id="num" value="" /> 把input輸入框的格式改為number就可以彈出數字鍵盤 還有一種可以呼叫九宮格數字鍵盤: <input type="number" patte

android仿微信、QQ等聊天介面,實現點選輸入軟鍵盤、點選其他區域收起軟鍵盤,預設滑動至最低端

如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==

android 實現點選輸入日期選擇對話方塊(DatePickerDialog)

前言 這裡我們實現一個功能,點選日期輸入框(EditText),即可彈出日期選擇對話方塊(DatePickerDialog),等使用者選擇日期後,將使用者選擇的日期顯示在日期輸入框。 1.activity_main.xml 這裡只有一個TextView和EditText。

Flutter 輸入軟鍵盤失效的問題

TextField TextFormField 場景 問題 解決問題 Issues 方法 後續 場景 當我們使用TextField TextFormField

Android 輸入樣式

在androidMainfest.xml檔案中 在Activity中設定 【A】stateUnspecified:軟鍵盤的狀態並沒有指定,系統將選擇一個合適的狀態或依賴於主題的設定 【B】stateUnchanged:當這個activity出現時,軟鍵盤將一直保持

移動web 鍵盤擋住輸入

                     這兩天在做移動端開發,做的時候遇到一點小問題,就是使用者準備輸入的時候,由於軟鍵盤的彈出,而遮擋住了輸入框,很不好的使用者體驗,上網搜了很久,感覺都不靠譜,一

Android頂部佈局View不隨著輸入而上移

前提 平時我們需要實現佈局底部佈局View隨著輸入框彈出而上移的效果,但是有些時候我們需要實現頂部佈局View不隨著輸入框彈出而上移,比如自定義的Activity的title,這個時候就不希望隨著輸入框彈出而title也上移。以為此時title上移就看不見了。

iOS開發- 自動消失的

- (void)timerFireMethod:(NSTimer*)theTimer//彈出框 { UIAlertView *promptAlert = (UIAlertView*)[theTimer userInfo]; [promptAlert dismi

Android開發問題:底部popwindow,會被某些手機底部的選單欄擋住

描述 正常狀態下應是下圖 而底部彈出popwindow後會出現下圖的問題: 解決方法 一句話解決問題。 //防止虛擬軟鍵盤被彈出選單遮住 popupWindow.s

手機頁面alert有url咋辦

在script中加入如下程式碼 window.alert = function(name){ // 重寫alert方法去掉ios下alert帶的url var iframe = doc

Android Notification 手機系統橫幅提示呼叫

類似於仿微信資訊提示提出框。 在專案當中集成了推送功能,當手機接收到訊息後只是在手機通知欄有提示資訊。所以需要展示像微信資訊彈出框一樣的效果,開始自己還以為微信資訊彈出框是自定義Dialog之類的自定義控制元件;後面發現其實微信也是呼叫 Android Notificati

Android 最多輸入30個字元就不能輸入提示提醒

android顯示edittext最多輸入字元,Android 中的EditText最大可輸入字元數可以通過xml檔案中為EditText設定maxLength屬性或者在程式碼中為EditText設定L

移動web開發之像素和DPR

javascript element 英語單詞 計算機 web開發 定義  像素,又稱畫素,是圖像顯示的基本單位,譯自英文“pixel”,pix是英語單詞picture的常用簡寫,加上英語單詞“元素”element,就得到pixel,故“像素”表示“圖像元素”之意,有時亦被稱為pel(pi

移動web開發中屏幕適配問題

設置 應該 相對 用戶 默認 min 等於 滾動 imu 1、首先屏幕的尺寸就是屏幕對角線的長度 尺寸是固定的 2、開發中遇到的單位 相對單位(即相對於屏幕):px em pt 絕對單位(固定的大小,與設備屏幕無關):in cm 3、像素密度 像素

淺淡HTML5移動Web開發

問題 nbsp 插入 應該 響應式 媒體 窗口 彈性 根據 淺淡HTML5移動Web開發 說實話,我們這次開發移動端的項目,整個項目組的人都是第一次,最初立項的時候為是選擇native app和web app還爭論了一番,最後綜合考慮,我們選擇了web(我們選擇了h5)

移動WEB開發之JS內置touch事件[轉]

調用 位置 .com 構造 turn listener 附件 cli 瀏覽器 iOS上的Safari也支持click 和mouseover等傳統的交互事件,只是不推薦在iOS的瀏覽器應用上使用click和mouseover,因為這兩個事件是為了支持鼠標點擊而設計 出來的。

解決 安卓手機 軟鍵盤 布局的問題

bsp doc html document 軟鍵盤 cti nbsp lur script 一、 js <script type="text/javascript">$(‘body,html‘).height(document.body.clientHeig

移動 web 開發問題和優化小結

ash 下滑 鏈接 出了 區別 area -- png 一般來說 1.前言 到目前為止,互聯網行業裏,手機越來越智能化,移動端占有的比例越來越高,尤其實在電商,新聞,廣告,遊戲領域。用戶要求越來越高,網站功能越來越好,效果越來越炫酷,這就要求我們產品質量越來越高,web前端

移動端頁面input輸入被鍵盤遮擋問題

abs 無法 gin 區域 失效 -1 osi mit main <body class="layout-fixed"> <!-- fixed定位的頭部 --> <header> </he