Merge branch 'feat-auto-blur' into dev

src/core/view/components/input/index.vue

@@ -18,6 +18,7 @@
       <input
         ref="input"
         v-model="valueSync"
+        v-keyboard
         :disabled="disabled"
         :type="inputType"
         :maxlength="maxlength"
@@ -153,8 +154,6 @@ export default {
       }
       $vm = $vm.$parent
     }
-
-    this.initKeyboard(this.$refs.input)
   },
   beforeDestroy () {
     this.$dispatch('Form', 'uni-form-group-update', {

src/core/view/components/textarea/index.vue

@@ -31,6 +31,7 @@
       <textarea
         ref="textarea"
         v-model="valueSync"
+        v-keyboard
         :disabled="disabled"
         :maxlength="maxlengthNumber"
         :autofocus="autoFocus || focus"
@@ -199,8 +200,6 @@ export default {
       }
       $vm = $vm.$parent
     }
-
-    this.initKeyboard(this.$refs.textarea)
   },
   beforeDestroy () {
     this.$dispatch('Form', 'uni-form-group-update', {

src/core/view/mixins/keyboard.js

@@ -2,14 +2,73 @@ import {
   plusReady
 } from 'uni-shared'
 
-function hideKeyboard () {
-  document.activeElement.blur()
-}
 /**
  * 保证iOS点击输入框外隐藏键盘
  */
 function iosHideKeyboard () { }
 
+function showSoftKeybord () {
+  plusReady(() => {
+    plus.key.showSoftKeybord()
+  })
+}
+
+function setSoftinputTemporary (vm) {
+  plusReady(() => {
+    const currentWebview = plus.webview.currentWebview()
+    const style = currentWebview.getStyle() || {}
+    const rect = vm.$el.getBoundingClientRect()
+    currentWebview.setSoftinputTemporary && currentWebview.setSoftinputTemporary({
+      mode: style.softinputMode === 'adjustResize' ? 'adjustResize' : (vm.adjustPosition ? 'adjustPan' : 'nothing'),
+      position: {
+        top: rect.top,
+        height: rect.height + (Number(vm.cursorSpacing) || 0)
+      }
+    })
+  })
+}
+
+function setSoftinputNavBar (vm) {
+  if (vm.showConfirmBar === 'auto') {
+    delete vm.__softinputNavBar
+    return
+  }
+  plusReady(() => {
+    const currentWebview = plus.webview.currentWebview()
+    const { softinputNavBar } = currentWebview.getStyle() || {}
+    const showConfirmBar = softinputNavBar !== 'none'
+    if (showConfirmBar !== vm.showConfirmBar) {
+      vm.__softinputNavBar = softinputNavBar || 'auto'
+      currentWebview.setStyle({
+        softinputNavBar: vm.showConfirmBar ? 'auto' : 'none'
+      })
+    } else {
+      delete vm.__softinputNavBar
+    }
+  })
+}
+
+function resetSoftinputNavBar (vm) {
+  const softinputNavBar = vm.__softinputNavBar
+  if (softinputNavBar) {
+    plusReady(() => {
+      const currentWebview = plus.webview.currentWebview()
+      currentWebview.setStyle({
+        softinputNavBar
+      })
+    })
+  }
+}
+
+let isAndroid
+let osVersion
+if (__PLATFORM__ === 'app-plus') {
+  plusReady(() => {
+    isAndroid = plus.os.name.toLowerCase() === 'android'
+    osVersion = plus.os.version
+  })
+}
+
 export default {
   name: 'Keyboard',
   props: {
@@ -22,103 +81,91 @@ export default {
       default: 'auto'
     },
     adjustPosition: {
-      type: Boolean,
+      type: [Boolean, String],
+      default: true
+    },
+    autoBlur: {
+      type: [Boolean, String],
       default: true
     }
   },
   watch: {
     focus (val) {
-      if (val) {
-        this.showSoftKeybord()
+      if (val && __PLATFORM__ === 'app-plus') {
+        showSoftKeybord()
       }
     }
   },
-  mounted () {
-    if (this.autoFocus || this.focus) {
-      this.showSoftKeybord()
+  directives: {
+    keyboard: {
+      inserted (el, binding, vnode) {
+        vnode.context.initKeyboard(el)
+      }
     }
   },
-  beforeDestroy () {
-    this.onKeyboardHide()
+  mounted () {
+    if ((this.autoFocus || this.focus) && __PLATFORM__ === 'app-plus') {
+      showSoftKeybord()
+    }
   },
   methods: {
     initKeyboard (el) {
-      el.addEventListener('focus', () => {
-        this.hideKeyboardTemp = function () {
-          hideKeyboard()
+      let focus
+      let keyboardHeight
+
+      const keyboardChange = (event) => {
+        keyboardHeight = event.height
+        // 安卓切换不同键盘类型时会导致键盘收回，需重新设置
+        if (focus && keyboardHeight === 0) {
+          setSoftinputTemporary(this)
+        }
+        // 安卓/iOS13收起键盘时主动失去焦点
+        if (this.autoBlur && focus && keyboardHeight === 0 && (isAndroid || parseInt(osVersion) >= 13)) {
+          document.activeElement.blur()
         }
-        UniViewJSBridge.subscribe('hideKeyboard', this.hideKeyboardTemp)
+      }
+
+      el.addEventListener('focus', () => {
+        focus = true
         document.addEventListener('click', iosHideKeyboard, false)
-        this.setSoftinputNavBar()
-        this.setSoftinputTemporary()
+
+        if (__PLATFORM__ === 'app-plus') {
+          document.addEventListener('keyboardchange', keyboardChange, false)
+          setSoftinputNavBar(this)
+          setSoftinputTemporary(this)
+        }
       })
-      el.addEventListener('blur', this.onKeyboardHide.bind(this))
-    },
-    showSoftKeybord () {
-      if (__PLATFORM__ === 'app-plus') {
-        plusReady(() => {
-          plus.key.showSoftKeybord()
-        })
-      }
-    },
-    setSoftinputTemporary () {
-      if (__PLATFORM__ === 'app-plus') {
-        plusReady(() => {
-          const currentWebview = plus.webview.currentWebview()
-          const style = currentWebview.getStyle() || {}
-          const rect = this.$el.getBoundingClientRect()
-          currentWebview.setSoftinputTemporary && currentWebview.setSoftinputTemporary({
-            mode: style.softinputMode === 'adjustResize' ? 'adjustResize' : (this.adjustPosition ? 'adjustPan' : 'nothing'),
-            position: {
-              top: rect.top,
-              height: rect.height + (Number(this.cursorSpacing) || 0)
-            }
-          })
-        })
-      }
-    },
-    setSoftinputNavBar () {
+
       if (__PLATFORM__ === 'app-plus') {
-        if (this.showConfirmBar === 'auto') {
-          delete this.__softinputNavBar
-          return
-        }
-        plusReady(() => {
-          const currentWebview = plus.webview.currentWebview()
-          const { softinputNavBar } = currentWebview.getStyle() || {}
-          const showConfirmBar = softinputNavBar !== 'none'
-          if (showConfirmBar !== this.showConfirmBar) {
-            this.__softinputNavBar = softinputNavBar || 'auto'
-            currentWebview.setStyle({
-              softinputNavBar: this.showConfirmBar ? 'auto' : 'none'
-            })
-          } else {
-            delete this.__softinputNavBar
+        el.addEventListener('click', () => {
+          if (focus && keyboardHeight === 0) {
+            setSoftinputTemporary(this)
           }
         })
       }
-    },
-    resetSoftinputNavBar () {
-      if (__PLATFORM__ === 'app-plus') {
-        const softinputNavBar = this.__softinputNavBar
-        if (softinputNavBar) {
-          plusReady(() => {
-            const currentWebview = plus.webview.currentWebview()
-            currentWebview.setStyle({
-              softinputNavBar
-            })
-          })
+
+      const onKeyboardHide = () => {
+        document.removeEventListener('click', iosHideKeyboard, false)
+
+        if (__PLATFORM__ === 'app-plus') {
+          document.removeEventListener('keyboardchange', keyboardChange, false)
+          resetSoftinputNavBar(this)
+        }
+
+        // 修复ios端显示与点击位置错位的Bug by:wyq
+        if (String(navigator.vendor).indexOf('Apple') === 0) {
+          document.documentElement.scrollTo(document.documentElement.scrollLeft, document.documentElement.scrollTop)
         }
       }
-    },
-    onKeyboardHide () {
-      UniViewJSBridge.unsubscribe('hideKeyboard', this.hideKeyboardTemp)
-      document.removeEventListener('click', iosHideKeyboard, false)
-      this.resetSoftinputNavBar()
-      // 修复ios端显示与点击位置错位的Bug by:wyq
-      if (String(navigator.vendor).indexOf('Apple') === 0) {
-        document.documentElement.scrollTo(document.documentElement.scrollLeft, document.documentElement.scrollTop)
-      }
+
+      el.addEventListener('blur', () => {
+        focus = false
+        onKeyboardHide()
+      })
+
+      this.$on('hook:beforeDestroy', () => {
+        onKeyboardHide()
+      })
     }
   }
 }

src/platforms/app-plus/service/framework/plugins/keyboard.js

 import {
-  onMethod,
-  getCurrentPageId
+  onMethod
 } from '../../../../../core/service/platform'
 
 const isAndroid = plus.os.name.toLowerCase() === 'android'
 const FOCUS_TIMEOUT = isAndroid ? 300 : 700
-const HIDE_TIMEOUT = isAndroid ? 800 : 300
 let keyboardHeight = 0
 let onKeyboardShow
 let focusTimer
-let hideKeyboardTimeout
 
 export function hookKeyboardEvent (event, callback) {
   onKeyboardShow = null
@@ -37,18 +34,5 @@ onMethod('onKeyboardHeightChange', res => {
   keyboardHeight = res.height
   if (keyboardHeight > 0) {
     onKeyboardShow && onKeyboardShow()
-    if (hideKeyboardTimeout) {
-      clearTimeout(hideKeyboardTimeout)
-      hideKeyboardTimeout = null
-    }
-  } else {
-    // 安卓/iOS13收起键盘时通知view层失去焦点
-    if (isAndroid || parseInt(plus.os.version) >= 13) {
-      hideKeyboardTimeout = setTimeout(function () {
-        hideKeyboardTimeout = null
-        var pageId = getCurrentPageId()
-        UniServiceJSBridge.publishHandler('hideKeyboard', {}, pageId)
-      }, HIDE_TIMEOUT)
-    }
   }
 })