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