Summarize several mobile terminal H5 soft keyboard holes and their solutions

1, some models of the soft keyboard to block the original view

Solution: You can listen to the soft keyboard on the mobile end

The element.scrollintoView () method scrolls the current Element into the viewable area of the browser window. The parameters are as follows.

• True, indicating that the top of the element is aligned with the top of the visible portion of the current region
• False, indicating that the bottom of the element is aligned with the tail of the visible portion of the current region

Element. ScrollIntoViewIfNeeded () method is also used to will not in the visible region of the browser window elements, scroll to the visible region of the browser window. But if the element is already in the visible area of the browser window, no scrolling occurs. 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)}})Copy the code

2, ios keyboard folded up when the page does not fall back, the bottom will be blank

When filling out a form on some iphones, the soft keyboard is closed after you type in the text, leaving a blank space at the bottom. This can be done by listening for the keyboard to scroll back to the original position.

window.addEventListener('focusout'.function() {
  window.scrollTo(0.0)})// Input input box pop-up soft keyboard solution.
var bfscrolltop = document.body.scrollTop
$('input')
  .focus(function() {
    document.body.scrollTop = document.body.scrollHeight
    //console.log(document.body.scrollTop);
  })
  .blur(function() {
    document.body.scrollTop = bfscrolltop
    //console.log(document.body.scrollTop);
  })
Copy the code

3. OnkeyUp and onKeydown compatibility problems

Input keyboard events keyup, keyDown and so on are not well supported in some ios models. There is no problem in Android mobile browser when input is used to monitor keyboard keyup events, but the corresponding keyup events are not immediately corresponding after input in ios mobile browser

• onkeypressOccurs when the user presses and releases any alphanumeric key. System buttons (arrow keys and function keys) are not recognized.
• onkeyupOccurs when the user releases any previously pressed keyboard key.
• onkeydownOccurs when the user presses any keyboard key, including system buttons such as arrow keys and function keys.

Ios12 input box is difficult to click to get focus, can not play a soft keyboard

Fastclick.js is compatible with ios12, you can make the following changes 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()
  }
}
Copy the code

5. Fastclick causes focus conflicts in dropdown boxes

With FastClick on mobile, on ios, there are several successive drop-down boxes where the first select box suddenly fills the second drop-down box.

The root cause of Fastclick is a bug that causes multiple select on ios to change the focus. Check whether the device is ios in the onTouchStart event, then check whether the current nodeName is select, if return false to prevent fastClick from executing other events.

Github source code address: fastclick.js

/ / line 391 rows
FastClick.prototype.onTouchStart = function(event) {
  // Add an event to its method that does not return when ios select is checked
  if (deviceIsIOS && this.targetElement == 'select') this.targetElement = null
  event.preventDefault()
}
// Line521 or the source code about the touchEnd test is not ios or not select event comment,
if(! deviceIsIOS || targetTagName ! = ='select') {
  this.targetElement = null
  event.preventDefault()
}
Copy the code

6. Causes of fixed failure in ios

When the soft keyboard is invoked, the fixed element on the page becomes absolute, so when the page is scrolling on more than one screen, the invalid fixed element will follow the scrolling. The same problem applies to any soft keyboard (such as date and time selection, select selection, etc.) that is invoked, not just for type=text fields.

Workaround: Instead of letting the page scroll, let the main section scroll by itself, set the height of the main section to 100%, overflow:scroll

<body>
  <div class='warper'>
    <div class='main'></div>
  <div>
  <div class="fix-bottom"></div>
</body>
Copy the code

.warper {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; /* Fix ios sliders */
}
.fix-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}
Copy the code

7, ios keyboard newline to search

1. input type="search"
2. Input must have an action.action="javascript:return true"
3. Form submission blocks default submission events

<form action="javascript:return true" @submit.prevent="formSubmit">
  <input type="search" placeholder="Please enter the name of the appeal" id="search" />
</form>
Copy the code

Recommend the article