HTML5鍵盤彈起遮擋輸入框的解決方法
發(fā)布時間：2024-01-03 15:42:30 作者：猿如意 
我要評論
我要評論混合開發(fā)中遇到一個問題，有些型號的安卓機和ios機型，輸入框喚起鍵盤后，輸入框會被鍵盤遮擋，需要手動滑動才能漏出來，影響用戶體驗，今天給大家分享HTML5鍵盤彈起遮擋輸入框的解決方法，感興趣的朋友一起看看吧
一、前言：
混合開發(fā)中遇到一個問題，有些型號的安卓機和ios機型，輸入框喚起鍵盤后，輸入框會被鍵盤遮擋，需要手動滑動才能漏出來，影響用戶體驗
二、解決辦法:
1.ios和android手機喚起的windows事件不一樣，要分別處理
2.document.body.scrollTop無效，可以用document.documentElement.scrollTop替換
三、具體實現(xiàn)過程：
// 判斷手機 - 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()就行
到此這篇關于HTML5鍵盤彈起遮擋輸入框的解決方法的文章就介紹到這了,更多相關h5鍵盤彈起遮擋輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
HTML5中input輸入框默認提示文字向左向右移動的示例代碼
這篇文章主要介紹了HTML5中input輸入框默認提示文字向左向右移動，本文通過實例代碼給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-10
這篇文章主要介紹了HTML5輸入框下拉菜單功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-09-08
AmazeUI在模態(tài)框中嵌入表單形成模態(tài)輸入框
這篇文章主要介紹了AmazeUI在模態(tài)框中嵌入表單形成模態(tài)輸入框,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-08-20
這篇文章主要介紹了AmazeUI 輸入框組的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-08-14
html5實現(xiàn)輸入框fixed定位在屏幕最底部兼容性
這篇文章主要介紹了html5實現(xiàn)輸入框fixed定位在屏幕最底部兼容性,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-07-03
HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法
這篇文章主要介紹了HTML5去掉輸入框type為number時的上下箭頭的實現(xiàn)方法,需要的朋友可以參考下2020-01-03Html5新標簽datalist實現(xiàn)輸入框與后臺數(shù)據(jù)庫數(shù)據(jù)的動態(tài)匹配
HTML5新增的標簽datalist實現(xiàn)輸入中文/拼音首字母時，自動進入數(shù)據(jù)庫模糊查詢，并返回相應的結(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
