移動端input輸入框調起,頁面上推,輸入框關閉無法恢復
最近做h5 input調起輸入框,頁面上推,輸入框關閉無法恢復的問題,當時就覺得很奇怪,因為是整個body上推 ,無法恢復,但是稍微點擊一下屏幕,body就恢復了,所以當時想的解決方案就是當輸入框失去焦點的可以讓頁面動一下。
首先給input綁定上失去焦點函數
<input @blur.prevent="blur()">(這裏用的vue寫法)
所以想到的第一個解決方案就是
blur:function(){
setTimeout(()=>{
document.body.style.paddingBottom = "10px"
setTimeout(()=>{
document.body.style.paddingBottom = "0px"
},100)
},100)
}
確實生效了,可是感覺代碼好多,後來就在網上找到了別人的一種解決方案
blur:function(){
scrollTo(0, pageYOffset)
}
當前也生效了就成功解決那個body上推無法回復的問題(上述問題,發生在ios系統上)
移動端input輸入框調起,頁面上推,輸入框關閉無法恢復
相關推薦
移動端input輸入框調起,頁面上推,輸入框關閉無法恢復
輸入框 input 無法 失去 移動端 當前 焦點 生效 寫法 最近做h5 input調起輸入框,頁面上推,輸入框關閉無法恢復的問題,當時就覺得很奇怪,因為是整個body上推 ,無法恢復,但是稍微點擊一下屏幕,body就恢復了,所以當時想的解決方案就是當輸入框失去焦點的可以
javascript——移動端input,textarea輸入框獲得焦點頁面上移
一路走來,在移動端頁面這條路上,踩了不少坑啊。 下面介紹一下我踩的坑之一:點選input時,軟鍵盤把input框給遮住了,,,這怎麼行,解決唄。總不能讓設計師把頁面重新佈局一遍吧,再說這定下來的頁面,怎麼可能因為我這點小問題說改就改。。。 嗚嗚~~(>_<)~~我還是個孩
移動端 input 輸入框實現自帶鍵盤“搜索“功能並修改X
cancel 文字 webkit 自動 border search 輸入 func 不同 主要利用html5的,input[type=search]屬性來實現,此時input和type=text外觀和功能沒啥區別; html代碼入下: <form action=""
移動端input“輸入框”常見問題及解決方法
轉自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,輸入框獲得焦點時,頁面輸入框被遮蓋,定位的元素位置錯亂: 當頁input存在於吸頂或者吸底元素中時,使用者點選輸入框,輸入法彈出後,fiexd失效,頁面中定位好的元素隨螢幕
移動端input輸入的時候固定的底部被鍵盤頂上去解決方法
<div v-for="(item, index) in formList" class="formList" :key="index"> <input v-model="dataValue[item.alias]" :placeholder="
VUE 移動端 input 只能輸入數字
<input type="number" pattern="[0-9]*" oninput="if(value.length>7) value=value.slice(0,7)"placeh
h5移動端常見虛擬鍵盤頂起底部導航欄解決辦法
底部 size 當前 發生 解決 lse ide cti () 在h5移動端開發中相信很多朋友跟我一樣都會遇到頁面底部導航被虛擬鍵盤頂起的問題,自己在網上找到的解決辦法拿出來與大家分享,有不完美之處還望見諒,有更好的解決辦法可以貼出來大家一起互相學習!! var
移動端input中的placeholder屬性垂直
今天做專案時發現,在手機端用placeholder時,Android手機可以垂直顯示;ISO則不能使placeholder垂直;解決辦法: .gcddfadf-con-pay-1 input::-webkit-input-placeholder{ font-size:0.3rem; line-height:
關於手機端input獲取焦點呼起鍵盤背景圖片擠壓解決方案
1、解決圖片擠壓問題 可以將背景圖片height: 100%改為min-height:100%即可 2、解決android下鍵盤不遮擋input輸入框 // 處理android 下鍵盤遮擋input let ua = window.navigator.userAgent
H5 移動端Input File 檔案上傳以及後端接收
前端部分 前端部分主要用ajax 上傳Base64字串碼 $("#fileInput").live("change", function() { var path = $(this).val();
iso移動端input的bug解決(vue)
iso中input很奇怪,點選空白地方,鍵盤也不會消失,影響頁面中其他功能 解決辦法: 點選的元素不是input或者textarea,那麼就讓上一個獲得焦點的輸入框失去焦點。 涉及的程式碼: <input type="tel" @focus="isohide($event)"> var i
第三方app調起自己的app方法,app url schema
好訊息:微信團隊邀請我的iOS開發(id:iOSDevTip)微信公眾號開通讚賞功能,以後我就可以光明正大的通過文章要飯啦。你的讚賞就是我最大的動力。 這是今天下午15:30收到的邀請: 微信讚賞功能 為什麼推出讚賞功能?微信公眾號自2012年推出以來,一直成爆發式的增長。微信推出讚賞功能最重要
html5移動端input file可進行拍照和選擇圖片
<input id="fileImage" class="fileImage" type="file" accept="image/*" capture="camera" size="30"> accept="image/*;capture=camera" 直
手機點選輸入框時,當鍵盤彈起,介面上彈,鍵盤收起,介面下來
var wHeight = window.innerHeight; //獲取初始可視視窗高度 window.addEventListener('resize', function(){
h5判斷百度、高德、騰訊地圖客戶端是否安裝及調起客戶端導航
(function($, navigation) { navigation.getLocation = function(callback) { callback = callback || $.noop; plus.geolocat
移動端input搜索的實現
boa put board 鍵盤消失 for blog val clas () html代碼如下: <form action="javascript:return true;"> <input type="search
移動端左右滑動阻止觸發上一頁下一頁操作
最近有個需求,就是非常簡單地橫向滑動。打算使用overflow-x:auto;來試驗原生滑動,但在安卓版UC下當滑到最左或者最右會 1 預設啟用UC上一頁、下一頁手勢 ,導致頁面的跳轉(原生瀏覽器無此手勢)。之前好幾個專案之前視訊有使用js處理(query: 夏洛
select下拉框,選擇其中一個,然後進行查詢,完成之後,頁面上的select框不回顯當前查詢時選中的值
開發十年,就只剩下這套架構體系了! >>>
java算法面試題:遞歸算法題2 第1個人10,第2個比第1個人大2歲,依次遞推,請用遞歸方式計算出第8個人多大?
else oid 算法題 body println 算法 ring swift java算法 package com.swift; public class Digui_Return { public static void main(String[] arg
React 怎樣將後端給的html標籤渲染到頁面上
在使用react的過程中,發現需要渲染的資料是從後端獲取到的標籤語言,如果直接將他放在react裡面是不能夠正確渲染的。 解決方法如下: render() { let listdata = this.state.data.entity