当前位置:网站首页>App embedded H5 --- iPhone soft keyboard blocks input text
App embedded H5 --- iPhone soft keyboard blocks input text
2022-07-07 05:01:00 【Kratial】
1. The cause of the problem
stay ios in , The soft keyboard is at the top of the page , The pop-up of the soft keyboard will not cause the height of the window to change , Therefore, the input box at the bottom will be blocked .
But in android Next , The soft keyboard is on the same level as the window , So when the soft keyboard pops up , The current window will change , Therefore, there is no such problem .
2. How to monitor the pop-up and hiding of soft keyboard
stay ios The soft keyboard will pop up when you focus in , When the focus is lost, the soft keyboard will be folded
3. Solution
(1)scrollIntoView
(2) Monitor focus and out of focus
(3) Use this scrollIntoView, Ensure that the current input box is outside the original visual area
handleFocus(elem) {
console.log(' The soft keyboard pops up ')
document.body.style.height = '100vh' + Soft keyboard height
document.querySelector('.' + elem).scrollIntoView();
}
},
handleBlur() {
document.body.style.height = '100%'
console.log(' Soft keyboard hidden ')
}
4. About scrollIntoView Introduction to
Element Interface scrollIntoView() Method scrolls the parent container of the element , Cause to be called scrollIntoView() The element is visible to the user .
Reference link :MDN—scrollIntoView
边栏推荐
- [line segment tree practice] recent requests + area and retrieval - array modifiable + my schedule I / III
- When knative meets webassembly
- [ArcGIS tutorial] thematic map production - population density distribution map - population density analysis
- STM32F103 realize IAP online upgrade application
- Vscode automatically adds a semicolon and jumps to the next line
- JS 的 try catch finally 中 return 的执行顺序
- 【数模】Matlab allcycles()函数的源代码(2021a之前版本没有)
- 高手勿进!写给初中级程序员以及还在大学修炼的“准程序员”的成长秘籍
- Analysis -- MySQL statement execution process & MySQL architecture
- Liste des hôtes d'inventaire dans ansible (je vous souhaite des fleurs et de la romance sans fin)
猜你喜欢
【愚公系列】2022年7月 Go教学课程 005-变量
Flex layout and usage
Ansible reports an error: "MSG": "invalid/incorrect password: permission denied, please try again“
Meow, come, come: do you really know if, if else
01机器学习相关规定
Ansible中的inventory主機清單(預祝你我有數不盡的鮮花和浪漫)
Why do many people misunderstand technical debt
Chapter 9 Yunji datacanvas company won the highest honor of the "fifth digital finance innovation competition"!
R language principal component PCA, factor analysis, clustering analysis of regional economy analysis of Chongqing Economic Indicators
窗口可不是什么便宜的东西
随机推荐
JS 的 try catch finally 中 return 的执行顺序
Using thread class and runnable interface to realize the difference between multithreading
使用Thread类和Runnable接口实现多线程的区别
STM32F103ZE+SHT30检测环境温度与湿度(IIC模拟时序)
01 machine learning related regulations
[ArcGIS tutorial] thematic map production - population density distribution map - population density analysis
史上最全学习率调整策略lr_scheduler
AttributeError: module ‘torch._ C‘ has no attribute ‘_ cuda_ setDevice‘
Canteen user dish relationship system (C language course design)
Meaning of 'n:m' and '1:n' in database design
九章云极DataCanvas公司蝉联中国机器学习平台市场TOP 3
Introduction to the PureMVC series
Pointer and array are input in function to realize reverse order output
Ansible overview and module explanation (you just passed today, but yesterday came to your face)
Time complexity & space complexity
JS variable plus
Field data acquisition and edge calculation scheme of CNC machine tools
指针与数组在函数中输入实现逆序输出
Windows are not cheap things
Camera calibration (I): robot hand eye calibration