HTML5鍵盤(pán)彈起遮擋輸入框的解決方法
我要評(píng)論一、前言：
混合開(kāi)發(fā)中遇到一個(gè)問(wèn)題，有些型號(hào)的安卓機(jī)和ios機(jī)型，輸入框喚起鍵盤(pán)后，輸入框會(huì)被鍵盤(pán)遮擋，需要手動(dòng)滑動(dòng)才能漏出來(lái)，影響用戶體驗(yàn)
二、解決辦法:
1.ios和android手機(jī)喚起的windows事件不一樣，要分別處理
2.document.body.scrollTop無(wú)效，可以用document.documentElement.scrollTop替換
三、具體實(shí)現(xiàn)過(guò)程：
// 判斷手機(jī) - ios/andriod
function isIOS() {
const u = navigator.userAgent;
return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
}
/**
* @description: 鍵盤(pán)彈起，輸入框被遮擋
*/
function judgeInput() {
if (isIOS()) {
window.addEventListener('focusin', function () {
console.log(1+document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.documentElement.scrollTop = document.body.scrollHeight;
}, 0);
}
});
} else {
window.addEventListener('resize', function () {
console.log(2+ document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.activeElement.scrollIntoView();
}, 0);
}
});
}
}
export {
isIOS,
judgeInput
}鐺鐺鐺，實(shí)現(xiàn)啦，用的時(shí)候直接調(diào)用judgeInput()就行
到此這篇關(guān)于HTML5鍵盤(pán)彈起遮擋輸入框的解決方法的文章就介紹到這了,更多相關(guān)h5鍵盤(pán)彈起遮擋輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5中input輸入框默認(rèn)提示文字向左向右移動(dòng)的示例代碼
這篇文章主要介紹了HTML5中input輸入框默認(rèn)提示文字向左向右移動(dòng)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-10
這篇文章主要介紹了HTML5輸入框下拉菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-08
AmazeUI在模態(tài)框中嵌入表單形成模態(tài)輸入框
這篇文章主要介紹了AmazeUI在模態(tài)框中嵌入表單形成模態(tài)輸入框,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-08-20
這篇文章主要介紹了AmazeUI 輸入框組的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-14
html5實(shí)現(xiàn)輸入框fixed定位在屏幕最底部兼容性
這篇文章主要介紹了html5實(shí)現(xiàn)輸入框fixed定位在屏幕最底部兼容性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-07-03
HTML5去掉輸入框type為number時(shí)的上下箭頭的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5去掉輸入框type為number時(shí)的上下箭頭的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-01-03Html5新標(biāo)簽datalist實(shí)現(xiàn)輸入框與后臺(tái)數(shù)據(jù)庫(kù)數(shù)據(jù)的動(dòng)態(tài)匹配
HTML5新增的標(biāo)簽datalist實(shí)現(xiàn)輸入中文/拼音首字母時(shí)，自動(dòng)進(jìn)入數(shù)據(jù)庫(kù)模糊查詢，并返回相應(yīng)的結(jié)果，生成datalist，由于在輸入框中的輸入內(nèi)容發(fā)生變化時(shí)，datalist會(huì)自動(dòng)觸發(fā)2017-05-18HTML5 虛擬鍵盤(pán)出現(xiàn)擋住輸入框的解決辦法
本文主要介紹了HTML5 虛擬鍵盤(pán)出現(xiàn)擋住輸入框的解決辦法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-14HTML5為輸入框添加語(yǔ)音輸入功能的實(shí)現(xiàn)方法
本文給大家介紹如何使用html5為輸入框添加語(yǔ)音輸入功能，實(shí)現(xiàn)方法很簡(jiǎn)單，需要的朋友參考下本文2017-02-06
詳解移動(dòng)端HTML5頁(yè)面端去掉input輸入框的白色背景和邊框（兼容Android
本篇文章主要介紹了移動(dòng)端HTML5頁(yè)面端去掉input輸入框的白色背景和邊框，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-15
