js解決軟鍵盤遮擋輸入框的問(wèn)題分享
更新時(shí)間：2017年12月19日 14:28:40 作者：vcxiaohan2
下面小編就為大家推薦一篇js解決軟鍵盤遮擋輸入框的問(wèn)題分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
經(jīng)驗(yàn)須知
彈出軟鍵盤時(shí)：
ios端$(‘body').scrollTop()會(huì)改變
android端$(window).height()會(huì)改變
拉起鍵盤不是一瞬間，而是有一個(gè)緩動(dòng)過(guò)程
問(wèn)題重現(xiàn)
ios端，經(jīng)常會(huì)出現(xiàn)輸入法遮擋輸入框的問(wèn)題(特別是那種有一個(gè)白色頂部的輸入法，如：百度輸入法)，如圖：
問(wèn)題解決
我們只需要在輸入框聚焦之后，開(kāi)啟一個(gè)定時(shí)器，執(zhí)行$(‘body').scrollTop(1000000)，這樣由于整個(gè)body滾動(dòng)到了最下面，輸入框自然就看見(jiàn)了，具體請(qǐng)查看以下示例
示例源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
font-size: 0;
}
input {
font-size: 14px;
box-sizing: border-box;
width: 50%;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="bottom">
<input class="aInput" type="text" placeholder="ios聚焦后會(huì)被輸入法遮擋" />
<input class="bInput" type="text" placeholder="ios聚焦后不會(huì)被輸入法遮擋" />
</div>
</body>
<script>
$(function() {
// 解決輸入法遮擋
var timer = null;
$('.bInput').on('focus', function() {
clearInterval(timer);
var index = 0;
timer = setInterval(function() {
if(index>5) {
$('body').scrollTop(1000000);
clearInterval(timer);
}
index++;
}, 50)
})
});
</script>
</html>
以上這篇js解決軟鍵盤遮擋輸入框的問(wèn)題分享就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近寫管理端的需求，發(fā)現(xiàn)有一個(gè)excel導(dǎo)出的需求，所以正好本文就來(lái)和大家分享一下導(dǎo)出excel文件的三種實(shí)現(xiàn)方式，感興趣的小伙伴可以了解一下2023-07-07
這篇文章主要介紹了JavaScript事件委托用法,實(shí)例分析了使用事件委托觸發(fā)事件的具體使用技巧,需要的朋友可以參考下2015-01-01
javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
設(shè)置checkbox為只讀(readOnly)的兩種方式
設(shè)置checkbox為只讀的方法有很多，在本文為大家詳細(xì)介紹下兩種比較實(shí)用的方法，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實(shí)例形式分析了JavaScript繼承的基本定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法
這篇文章主要介紹了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的方法,以實(shí)例形式講述了js實(shí)現(xiàn)數(shù)字每三位加逗號(hào)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
UniApp?WebView頁(yè)面中的請(qǐng)求跨域問(wèn)題解決
在使用UniApp開(kāi)發(fā)中,通過(guò)WebView組件加載本地網(wǎng)頁(yè)時(shí),往往會(huì)遇到跨域問(wèn)題,下面這篇文章主要介紹了UniApp?WebView頁(yè)面中的請(qǐng)求跨域問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2024-10-10
兼容多瀏覽器的iframe自適應(yīng)高度(ie8 、谷歌瀏覽器4.0和 firefox3.5.3)
iframe在ie8 、谷歌瀏覽器4.0和 firefox3.5.3均成功自適應(yīng)高度.2009-11-11
這篇文章主要介紹了js實(shí)現(xiàn)飛入星星特效代碼,主要通過(guò)控制背景與飛入點(diǎn)的樣式,結(jié)合setTimeout函數(shù)即可實(shí)現(xiàn)星星飛入的效果,對(duì)于學(xué)習(xí)javascript有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下2014-10-10
js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼
這篇文章主要介紹了js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼,通過(guò)非常簡(jiǎn)單的JavaScript遍歷頁(yè)面元素及動(dòng)態(tài)設(shè)置樣式達(dá)到二級(jí)下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09