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

This article mainly introduces "what are the big pits of the H5 soft keyboard on the mobile side". In the daily operation, I believe that many people have doubts about the big pits of the H5 soft keyboard on the mobile side. I have consulted all kinds of materials and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the big pits of the H5 soft keyboard on the mobile side?" Next, please follow the editor to study!

1. Some models of soft keyboards pop up to block the original view

Solution: you can pop up by listening to the mobile soft keyboard.

The Element.scrollIntoView () method scrolls the current element into the visual area of the browser window. The parameters are as follows:

True, which indicates that the top of the element is aligned with the top of the visible part of the current area

False, which indicates that the bottom of the element is aligned with the tail of the visible part of the current area

The Element.scrollIntoViewIfNeeded () method is also used to scroll elements that are not in the visible area of the browser window to the visible area of the browser window. However, if the element is already in the visible area of the browser window, scrolling does not occur. This method is a proprietary variant of the standard Element.scrollIntoView () method.

Window.addEventListener ('resize', function () {if (document.activeElement.tagName =' INPUT' | | document.activeElement.tagName = = 'TEXTAREA') {window.setTimeout (function () {if (' scrollIntoView' in document.activeElement) {document.activeElement.scrollIntoView (false)} else {document.activeElement.scrollIntoViewIfNeeded (false)}, 0)}))

2. When the ios keyboard is put away, the page does not fall back, and the bottom will be left blank.

When some iPhones fill out the form, turn off the soft keyboard after typing, leaving a blank at the bottom. In this case, the falling time can be scrolled back to the original position by listening to the keyboard.

Window.addEventListener ('focusout', function () {window.scrollTo (0,0)}) / / input input box pops up the soft keyboard solution. Var bfscrolltop = document.body.scrollTop $('input') .focus (function () {documentdocument.body.scrollTop = document.body.scrollHeight / / console.log (document.body.scrollTop);}) .blur (function () {document.body.scrollTop = bfscrolltop / / console.log (document.body.scrollTop);})

3. Compatibility between onkeyUp and onKeydown

In some ios models, input keyboard events such as keyup, keydown, and so on are not supported very well. Using input to listen to keyboard keyup events is no problem in Android mobile browsers, but after typing with input method in ios mobile browsers, there is no immediate response to keyup events:

Occurs when an onkeypress user presses and releases any alphanumeric key. The system buttons (arrow keys and function keys) are not recognized.

Occurs when an onkeyup user releases any previously pressed keyboard keys.

Occurs when an onkeydown user presses any keyboard keys, including system buttons, such as arrow keys and function keys.

4. It is difficult to click on the ios12 input box to get the focus, and the soft keyboard cannot be popped up.

The problem found in location is the compatibility of fastclick.js with ios12. The following modifications can be made in the fastclick.js source code or main.js:

FastClick.prototype.focus = function (targetElement) {var length if (deviceIsIOS & & targetElement.setSelectionRange & & targetElement.type.indexOf ('date')! = = 0 & targetElement.type! = =' time' & & targetElement.type! = = 'month') {length = targetElement.value.length targetElement.setSelectionRange (length, length) targetElement.focus ()} else {targetElement.focus ()}}

5. Fastclick causes focus conflict of drop-down box

After using fastclick on the mobile side, there are several consecutive drop-down boxes in the ios environment. The first select box is suddenly filled with the contents of the second drop-down box.

The root cause is that Fastclick causes multiple select under ios, click on one, and the focus is constantly changing bug. Modify the source code to determine whether the device is ios within the onTouchStart event, and then determine whether the current nodeName is select, and if it is return false to prevent fastClick from executing other events.

/ / line line 391 FastClick.prototype.onTouchStart = function (event) {/ / add the event if (deviceIsIOS & & this.targetElement = = 'select') this.targetElement = null event.preventDefault ()} / / line521 to its method when it is judged to be in compliance with select or if (! deviceIsIOS | | targetTagName! =' select') {this.targetElement = null event.preventDefault ()} in the source code about touchEnd judging non-ios or non-select.

6. The cause of fixed failure under ios

When the soft keyboard calls, the fixed element of the page becomes invalid and becomes absolute, so when the page is more than one screen and scrolls, the invalid fixed element scrolls along. Not limited to the type=text input box, any soft keyboard (such as time and date selection, select selection, etc.) will encounter the same problem.

Solution: do not let the page scroll, but let the main part scroll by itself, and the height of the main part is set to 100%

.warper {position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll;-webkit-overflow-scrolling: touch; / * solve the problem of ios sliding not smooth * /}. Fix-bottom {position: fixed; bottom: 0; width: 100%;}

7. Ios keyboard line wrapping becomes search

Input type= "search"

Input covers form, which must have action,action= "_ javascript:return true".

Form submission prevents default submission events

At this point, the study on "what are the big pits of the H5 soft keyboard on the mobile end" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.