Mobile soft keyboard closed monitoring

When the mobile side of the form operation, it is often necessary to listen to the keyboard of the collection, so as to complete the input processing. But the browser does not provide a direct monitoring of the interface of the soft keyboard, then how to listen to it? Available herecompatibility scenarios for monitoring。under the Android, most browsers, when the soft keyboard is closed,Triggering resize Events, which can be used to listen;iOS operating systemDoes not trigger the event, but most browsers willtriggeringForm'sBlur Events, so you can use this as a listening point. The browser's software disk monitoring status is shown in the following table:                                                      ,         &NB Sp         Soft keyboard closed Event listener Table    Therefore, through the monitoring onresize, onblur can realize the mobile mainstream browser soft keyboard to close the operation; can't immediately hear, You can listen for the onblur event of the form item, and do the corresponding processing when the table item is out of focus [but the result is the same as the delayed operation]. The corresponding code is as follows: Compatible 1: Monitor resize

 watchkeybord () {let me  = this   let oriwinheight  = Window.innerheight window.onresize 
    = function   () {Me.iskeybordavail  = 
    
     true 
      let newheight  = Window.innerheight  //  threshold greater than 140 determines the keyboard is closed.            /span> if  (Newheight-oriwinheight > 140 ' input '  = Newheight}}  

where Me.iskeybordavail = True, used to annotate the browser environment can use resize for listening, and 140 is a pre-valued threshold to exclude other resize operations. Only when the height difference of resize is greater than 140 is it recognized as a soft keyboard interaction, otherwise it is not. 　　such as the browser toolbar, the search bar is hidden, window page will have a small change. Compatible 2: Monitor for Lost focus Blur

SetTimeout (function() {    ///  Determine if resize can be used to listen    if  ( Me.iskeybordavail) {        return    }    if (!  NewValue) {        me.oprnum (' input ')    0)        

One of the iskeybordavail is to determine whether the keyboard can be processed by listening resize, and if so, the blur is not processed.  　　settimeout (function () {}, 0) is used here to defer the defocus operation to the next event loop, ensuring that the resize event has been triggered and that the iskeybordavail is already the correct value. In summary, as shown in the table, the browser behaves in four different cases and will have different processing: Browser Type 1: Triggered by Resize event, browser Type 2: Triggered by Resize event, browser Type 3: Triggered by Blur event, browser Type 4: Through delayed Blur event touch Hair [Not a real keyboard to pick up] as above, through compatible with the use of resize and blur methods, to achieve the keyboard to monitor the collection.

Mobile soft keyboard closed monitoring