1. How the keyboard works when it pops up
ios
The visual area provided by the native APP becomes smaller, the height of the WebView stays the same, and the overall scrolling height is the maximum scrolling height of the keyboard.
The android
The viewable area provided by the native APP becomes smaller, and the height of the WebView will change. The height is the viewable area height (the original height minus the keyboard height), and the WebView itself cannot scroll. Page content can be scrolled if it is too much beyond the webView height.
2. How the keyboard behaves when retracted
ios
When the “hide” button on the keyboard or a page area outside the input box is triggered, the input box loses focus and the soft keyboard collapses.
The android
When you click an area outside the input box, the input box loses focus and the keyboard collapses. However, when the button on the keyboard is triggered, the input box does not lose focus and the keyboard collapses.
3. How to listen for keyboard pop-up?
// Determine the device type
var judgeDeviceType = (function () {
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {
isIOS: isIOS,
isAndroid: isAndroid }; }) ();// Listen for input box soft keyboard up and down events
function listenKeybord($input) {
if (judgeDeviceType.isIOS) {
// IOS keyboard pop-up: IOS and Android input boxes get focus keyboard pop-up
$input.addEventListener(
'focus'.function () {
alert('The IOS keyboard is up! ');
// IOS keyboard up after operation
},
false
);
// IOS keyboard collapse: IOS click the area outside the input box or click the collapse button, input box will lose focus, the keyboard will collapse,
$input.addEventListener('blur'.() = > {
alert('The IOS keyboard is gone! ');
// Operate after the IOS keyboard collapses
});
}
// Android keyboard down: The page height will change when the Android keyboard is up or down, based on which to know the keyboard down
if (judgeDeviceType.isAndroid) {
var originHeight =
document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener(
'resize'.function () {
var resizeHeight =
document.documentElement.clientHeight ||
document.body.clientHeight;
if (originHeight < resizeHeight) {
alert('The Android keyboard is gone! ');
// The Android keyboard is closed
} else {
alert('The Android keyboard is up! ');
// When the Android keyboard is up
}
originHeight = resizeHeight;
},
false); }}Copy the code4. How do mobile terminals automatically initiate keyboard calls
Automatically call up the keyboard on the current page
<input id="test" type="text" /><button id="btn">Click on the</button>
<script>
// the autofocus attribute can focus on Android, but can not call the keyboard; On ios, you can't focus or call up the keyboard
/ / (2) document. QuerySelector (' # test). The focus (); You can focus on Android, but you can't call up the keyboard. On ios, you can't focus or call up the keyboard
On both Android and ios, you can focus and call up the keyboard
document.querySelector('#btn').addEventListener('click'.function() {
document.querySelector('#test').focus();
});
</script>
Copy the code❌ Both Android and ios determine whether the operation is actively triggered by the user when calling up the keyboard. If not, they do not respond.
✔️ click after focus, now with the user’s active click operation, so the keyboard can pop up.
So how to automatically call up the keyboard when the route changes?
There is a problem in 👉 single page project, clicking the search button from the front page to jump to the input box at the top of the search page requires automatic focus and call up the keyboard.
Our solution is to place an input in index.html ahead of time and hide it, manually calling the focus method of the input when the search button is clicked. The onfocus event of the input button is then used to call the focus method of the search page’s input box.
<input
id="trigger-input"
style="opacity: 0; position: fixed; left: -999px; width: 0; height: 0;"
/>
<script type="text/javascript">
function handleTriggerInputClick() {
var startTime = Date.now();
// Since it is a jump page, we need to poll to see if the target page's input has been rendered
var focusTimer = setInterval(() = > {
if (
document.querySelector('.search-input') &&
document.querySelector('.search-input').children[0]) {clearInterval(focusTimer);
document.querySelector('.search-input').children[0].focus();
}
if (Date.now() - startTime > 3 * 1000) {
clearInterval(focusTimer); }},300);
}
</script>
Copy the code
document.querySelector('#trigger-input').focus();
Copy the codeIn the actual test, when jumping to the search page
- Focus and call up keyboards work on ios and Android
Try not to call the Focus method that searches the input box on the page
-
Ios search page input box will still automatically focus and call up keyboard. The search page input box will still automatically focus, which is a bit weird. Ios will also automatically detect the current page input and focus.
-
Android, search page input box will not focus, still can call up the keyboard
Reference:
Maybe these are the H5 soft keyboard compatibility schemes you want
Modify the enter key