Shulou(Shulou.com)06/01 Report--

This article focuses on "html5 soft keyboard compatibility methods", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the method of html5 soft keyboard compatibility.

Learn the pop-up and fold status of the soft keyboard

It is important to know whether the soft keyboard is up or down, which is the premise of subsequent compatibility processing. However, H5 does not directly monitor the original events of the soft keyboard, but can only be popped up or folded through the soft keyboard, triggering indirect monitoring of other aspects of the page, saving the nation from the curve. Moreover, the performance is different on IOS and Android.

IOS soft keyboard pop-up performance

On IOS, the input box (input, textarea, or rich text) gets focus, the keyboard pops up, and the page (webview) is not compressed, or the height (height) does not change, but the page (webview) is scrolled up as a whole, and the maximum scrolling height (scrollTop) is the soft keyboard height.

Android soft keyboard pop-up performance

Similarly, on the Android, the input box gets the focus and the keyboard pops up, but the height of the page (webview) changes, generally speaking, the height is the height of the visual area (the original height minus the soft keyboard height), except that the webview itself cannot scroll because the page content is pulled apart.

IOS soft keyboard put away the performance

When the "put" button on the soft keyboard is triggered or the area of the page outside the input box is triggered, the input box loses focus and the soft keyboard collapses.

Android soft keyboard put away the performance

When the area outside the input box is triggered, the input box loses focus and the soft keyboard is folded away. However, when the up button keyboard on the keyboard is triggered, the input box does not lose focus, and the soft keyboard is folded.

Monitor soft keyboard pop up and put away

Considering the different performance of the above keyboard on IOS and Android, we can do the following separately to monitor the pop-up and fold-up of the soft keyboard:

On IOS, listen to the focus event of the input box to know that the soft keyboard pops up, and the blur event of the listening input box learns that the soft keyboard is folded.

On the Android, the height of the listening webview will change, and the height will decrease to learn that the soft keyboard will pop up, otherwise the soft keyboard will be folded.

/ / 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 to the soft keyboard pop-up and fold-up event of the input box function listenKeybord ($input) {if (judgeDeviceType.isIOS) {/ / IOS keyboard pop-up: IOS and Android input boxes get focus keyboard pop-up $input.addEventListener ('focus', function () {console.log (' IOS keyboard up!') ; / / IOS keyboard pop up action}, false) / / IOS keyboard away: IOS clicks outside the input box or click the put button, the input box will lose focus, the keyboard will be folded, $input.addEventListener ('blur', ()) = > {console.log (' IOS keyboard away!') / / Operation after the IOS keyboard is closed}) / / Andriod keyboard fold: the height of the Andriod keyboard pops up or the page height changes, based on which it is learned that the keyboard collapses 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) { console.log('Android 键盘收起啦！'); // Android 键盘收起后操作 } else { console.log('Android 键盘弹起啦！'); // Android 键盘弹起后操作 } originHeight = resizeHeight; }, false) }}var $inputs = document.querySelectorAll('.input');for (var i = 0; i < $inputs.length; i++) { listenKeybord($inputs[i]);} 弹起软键盘始终让输入框滚动到可视区 有时我们会做一个输入表单，有很多输入项，输入框获取焦点，弹起软键盘。当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区。 由于上面已经实现监听 IOS 和 Android 键盘弹起和收起，在这里，只需在 Android 键盘弹起后，将焦点元素滚动（scrollIntoView()）到可视区。查看效果，可以戳这里。 // 获取到焦点元素滚动到可视区function activeElementScrollIntoView(activeElement, delay) { var editable = activeElement.getAttribute('contenteditable') // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区 if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) { setTimeout(function () { activeElement.scrollIntoView(); }, delay) }}// ...// Android 键盘弹起后操作activeElementScrollIntoView($input, 1000);// ... 唤起纯数字软键盘 上面的表单输入框有要求输入电话号码，类似这样就要弹出一个数字软键盘了，既然说到了软键盘兼容，在这里就安插一下。比较好的解决方案如下： 请输入手机号 type="tel"， 是 HTML5 的一个属性，表示输入框类型为电话号码，在 Android 和 IOS 上表现差不多，都会有数字键盘，但是也会有字母，略显多余。 pattern="[0-9]"， pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、number、data 类、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 后，前端部分的验证更加简单高效了。IOS 中，只有 [0-9]* 才可以调起九宫格数字键盘，d 无效，Android 4.4 以下（包括X5内核），两者都调起数字键盘。 novalidate="novalidate"，novalidate 属性规定当提交表单时不对其进行验证，由于 pattern 校验兼容性不好，可以不让其校验，只让其唤起纯数字键盘，校验工作由 js 去做。 兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置"空"了。 其实这是 Apple 在 IOS 的 bug，会出现在所有的 Xcode10 打包的 IOS12 的设备上。微信官方已给出解决方案，只需在软键盘收起后，将页面（webview）滚回到窗口最底部位置（clientHeight位置）。修复后的上面表单输入 demo 可以戳这里 console.log('IOS 键盘收起啦！');// 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来var wechatInfo = window.navigator.userAgent.match(/MicroMessenger/([d.]+)/i);if (!wechatInfo) return;var wechatVersion = wechatInfo[1];var version = (navigator.appVersion).match(/OS (d+)_(d+)_?(d+)?/);if (+wechatVersion.replace(/./g, '') >

& + version [1] > = 12) {window.scrollTo (0, Math.max (document.body.clientHeight, document.documentElement.clientHeight));}

Compatible with third-party input method

After all that has been said above, more than half of the H5 chat input box has been filled in. Let's first take a look at the basic HTML structure of the chat input box:

Some chat content 1

Send

Style:

/ * omit some styles * / .chat__content {height: calc; margin-bottom: 40px; overflow-y: auto; overflow-x: hidden;}. Input__content {display: flex; height: 40px; position: absolute; left: 0; right: 0; bottom: 0; align-items: center;} / * omit some styles * /

It is very simple, that is, it is divided into the content area and the input area, and the input area is absolutely positioned. According to the practice of entering demo in the above form, it is true that most Android browsers have no problem, but when tested on IOS, when UC browsers cooperate with native input methods and third-party input methods (such as Sogou Input), the input box will be completely blocked; QQ Browser or Wechat browser, with third-party input method, the input box will be covered half Baidu browser with a third-party input method input box will also be completely covered.

On UC browsers, after the soft keyboard pops up, the height of the title bar above the browser has a height reduction delay dynamic effect, which causes the webview to scroll down a little bit and the input box at the bottom to roll into the invisible area.

For the third-party input method, the guess itself is due to the wrong calculation of the height after the input method panel pops up, which leads to the error of the initial scrolling position of the webview. In fact, both of these points are caused by the webview scrolling is not in place. You can let the soft keyboard pop up and let the focus element roll into the visual area again, forcing the webview to roll into place.

Console.log ('Android keyboard is up!') ; activeElementScrollIntoView ($input, 1000)

Hack scheme compatible with Android Xiaomi browser

In Android's Xiaomi browser, applying the above scheme, it is found that the chat input box is still tightly obscured, and scrollIntoView () is still motionless. So guess, in fact, it is rolled to the end, the soft keyboard pops up, the height of the page is greater than the height of the visible area, so that only after the soft keyboard pops up, the page height can be forcibly increased so that the input box can be displayed. The above is compatible with the third-party input method. To view the results, you can click here:

/ / Andriod keyboard fold: when the Andriod keyboard pops up or the page height changes, it is learned that the keyboard fold 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) {console.log (' Android keyboard!') ; / / fixed the input box in Xiaomi browser is still obscured by input method if (judgeDeviceType.isMiuiBrowser) {document.body.style.marginBottom = '0pxrabbit;}} else {console.log (' Android keyboard is up!') / / repair Xiaomi browser, the input box is still obscured by the input method if (judgeDeviceType.isMiuiBrowser) {document.body.style.marginBottom = '40pxkeyboard;} activeElementScrollIntoView ($input, 1000);} originHeight = resizeHeight;}, false)} so far, I believe you have a deeper understanding of the "html5 soft keyboard compatible method", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.