A need to review all the knowledge, H5 form is blocked by the keyboard, event agent, event delegation

Two involved dom The method on the ：

Element.scrollIntoViewIfNeeded()

   Element.scrollIntoViewIfNeeded() Method is used to scroll elements that are not in the visible area of the browser window to the visible area of the browser window . 
    If the element is already visible in the browser window , No scrolling .
   
    grammar ：
   element.scrollIntoViewIfNeeded(); //  Equate to  element.scrollIntoViewIfNeeded(true)
   element.scrollIntoViewIfNeeded(true);
   element.scrollIntoViewIfNeeded(false);
    Parameters ：
    One  Boolean  Type value , The default is true:
    If  true, Then the element will be centered in the visible area of its scrolling area .
    If  false, Then the element will be aligned with the closest edge of the viewable area of its scrolling area .  According to which edge of the element is closest to the visible area ,
    The top of the element will be aligned with the top edge of the visible area , Or the bottom edge of the element will be aligned with the bottom edge of the visible area .

Be careful ： Nonstandard : This feature is nonstandard , Please try not to use it in a production environment ！（2022.07.06）

Element.scrollIntoView()

 Element  Interface  scrollIntoView()  Method scrolls the parent container of the element , Cause to be called  scrollIntoView()  The element is visible to the user .
 
  grammar ：
 element.scrollIntoView(); //  Equate to  element.scrollIntoView(true)
 element.scrollIntoView(alignToTop); // Boolean  Type parameter 
 element.scrollIntoView(scrollIntoViewOptions); // Object  Type parameter 
  Parameters ：
  One Boolean value ：
 1、 If true, The top of the element will be aligned with the top of the visible area of the scrolling area it is in .
  Corresponding  scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value for this parameter .
 2、 If false, The bottom of the element will be aligned with the bottom of the visible area of the scrolling area it is in .
  Corresponding scrollIntoViewOptions: {block: "end", inline: "nearest"}.
  An object that contains the following properties ：
 behavior  Optional 
  Define animation transitions , "auto" or  "smooth"  One of . The default is  "auto".
 block  Optional 
  Define the vertical alignment , "start", "center", "end",  or  "nearest" One of . The default is  "start".
 inline  Optional 
  Define the horizontal alignment , "start", "center", "end",  or  "nearest" One of . The default is  "nearest".

var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({
    block: "end"});
element.scrollIntoView({
    behavior: "smooth", block: "end", inline: "nearest"});

Be careful ： It depends on the layout of other elements , This element may not scroll completely to the top or bottom .

The actual combat ：

//  my html structure 
 <div class="container" ref="containerForm" v-huiLoading="loading">
    <hm-scroll>
      <hm-validator-group :result="validate">
        <div class="form-item">
          <div class="label-input">
            <div class="name name-require">{
    {
     $t('vamc_mobile_handle_form_customer_name') }}</div>
            <hm-input :placeholder="$t('vamc_mobile_input_tip')" v-model="userForm.Name"></hm-input>
          </div>
          <hm-validator :model="userForm.Name" :rules="rules.Name" :messages="messages.Name"></hm-validator>
        </div>
        <div class="form-item" style="margin-top: 8.15px">
          <div class="label-input">
            <div class="name name-require">{
    {
     $t('vamc_mobile_handle_form_street_address') }}</div>
            <hm-input :placeholder="$t('vamc_mobile_input_tip')" v-model="userForm.Street" @blur="getAlternativeAddress"></hm-input>
          </div>
          <hm-validator :model="userForm.Street" :rules="rules.Street" :messages="messages.Street"></hm-validator>
        </div>
        <div class="form-item" style="margin-top: 4px">
          <div class="label-input">
            <div class="name name-require">{
    {
     $t('vamc_mobile_handle_form_city_town') }}</div>
            <hm-input :placeholder="$t('vamc_mobile_input_tip')" v-model="userForm.City"></hm-input>
          </div>
          <hm-validator :model="userForm.City" :rules="rules.City" :messages="messages.City"></hm-validator>
        </div>
    </hm-scroll>
  </div>
</template>

How to find it online 1：
Add two knowledge points ：
1、resize Method no matter the width change or height change of the screen can be detected , Can trigger this method .
2、Document Interface activeElement Read-only property , Used to return the current in DOM perhaps shadow DOM Focused in the tree Element.

    if ((/Android/gi).test(navigator.userAgent)) {
    
      window.addEventListener('resize', function () {
    
        if (document.activeElement.tagName == 'INPUT' ||
          document.activeElement.tagName == 'TEXTAREA') {
    
          window.setTimeout(function () {
    
            document.activeElement.scrollIntoViewIfNeeded();
          }, 0);
        }
      });
    }

How to find it online 2（ It's quite correct to say in detail , Specific links ）：

const ua = navigator.userAgent;
const iOS = /iPad|iPhone|iPod/.test(ua);
const input = document.querySelector('#input');
input.addEventListener('focus', () => {
    
  setTimeout(() => {
    
    if (iOS) {
    
      if (!/OS 11_[0-3]\D/.test(ua)) {
    
        document.body.scrollTop = document.body.scrollHeight;   
      }
    } else {
    
      input.scrollIntoView(false);
    }
  }, 300);
});

I'll take care of it ：
i： The event is entrusted to solve
ii： Learn from the methods found on the Internet 2 To transform

First delegate from the event ( Event agent ) Talking about!

1. js In the event of bubble, we know , Events on child elements will bubble up on parent elements .
2. Event agent is , Events originally added to child elements , On his father .
3. Then there is a problem ： The parent has so many child elements , How to distinguish which child element an event should be ？ The answer is ：event There are... Recorded in the object “ Event source ”, It is the child element of the event . It has compatibility problems , In the old IE Next , The source of the event is window.event.srcElement, Other browsers are event.target

What are the benefits of using event delegation ？ Concrete demo Please refer to the example, which is well written , It simply and clearly expounds the above 123

 The first advantage is high efficiency , such as , no need for The loop adds events to the child elements 
 The second advantage is ,js There is no need to add events to the newly generated child elements , The program logic is more convenient 

Specific function implementation code ：

// methods：  Can only act for click The incident is over , because onfocus Agent cannot be found 
 handleKeyboardCover() {
    
      const ua = navigator.userAgent;
      const iOS = /iPad|iPhone|iPod/.test(ua);
      this.$refs['containerForm'].onclick = function(event) {
    
        let dom = event.srcElement || event.target;
        if (dom.nodeName.toLowerCase() === 'input' || dom.nodeName.toLowerCase() === 'textarea') {
    
          console.log(' Set out to get click events ', event, event.target);
          setTimeout(() => {
    
            if (iOS) {
    
              if (!/OS 11_[0-3]\D/.test(ua)) {
    
              // document.body.scrollTop = document.body.scrollHeight; //  When ios Handle when the keyboard is blocked on 
              }
            } else {
    
              event.target.scrollIntoView({
    behavior: "smooth", block: "center", inline: "nearest"});
            }
          }, 300);
        }
      };
    }
//  Life cycle  
 mounted() {
    
    this.handleCreateMap();
    this.handleKeyboardCover();
  }