fix: App 端延迟获取焦点 question/107820

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

@@ -24,7 +24,6 @@
         :type="inputType"
         :maxlength="maxlength"
         :step="step"
-        :autofocus="focus"
         class="uni-input-input"
         autocomplete="off"
         @focus="_onFocus"
@@ -50,13 +49,13 @@
 </template>
 <script>
 import {
-  baseInput
+  field
 } from 'uni-mixins'
 const INPUT_TYPES = ['text', 'number', 'idcard', 'digit', 'password']
 const NUMBER_TYPES = ['number', 'digit']
 export default {
   name: 'Input',
-  mixins: [baseInput],
+  mixins: [field],
   props: {
     name: {
       type: String,
@@ -90,10 +89,6 @@ export default {
       type: [Number, String],
       default: 140
     },
-    focus: {
-      type: [Boolean, String],
-      default: false
-    },
     confirmType: {
       type: String,
       default: 'done'
@@ -134,9 +129,6 @@ export default {
     }
   },
   watch: {
-    focus (val) {
-      this.$refs.input && this.$refs.input[val ? 'focus' : 'blur']()
-    },
     maxlength (value) {
       const realValue = this.valueSync.slice(0, parseInt(value, 10))
       realValue !== this.valueSync && (this.valueSync = realValue)
@@ -168,6 +160,8 @@ export default {
       }
       $vm = $vm.$parent
     }
+
+    this._initField('input')
   },
   beforeDestroy () {
     this.$dispatch('Form', 'uni-form-group-update', {

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

@@ -35,16 +35,15 @@
         v-keyboard
         :disabled="disabled"
         :maxlength="maxlengthNumber"
-        :autofocus="autoFocus || focus"
         :class="{ 'uni-textarea-textarea-fix-margin': fixMargin }"
         :style="{ 'overflow-y': autoHeight ? 'hidden' : 'auto' }"
         class="uni-textarea-textarea"
-        @compositionstart="_compositionstart"
-        @compositionend="_compositionend"
-        @input.stop="_input"
-        @focus="_focus"
-        @blur="_blur"
-        @touchstart.passive="_touchstart"
+        @compositionstart="_onCompositionstart"
+        @compositionend="_onCompositionend"
+        @input.stop="_onInput"
+        @focus="_onFocus"
+        @blur="_onBlur"
+        @touchstart.passive="_onTouchstart"
       />
       <textarea
         v-if="disabled && fixColor"
@@ -62,12 +61,12 @@
 </template>
 <script>
 import {
-  baseInput
+  field
 } from 'uni-mixins'
 const DARK_TEST_STRING = '(prefers-color-scheme: dark)'
 export default {
   name: 'Textarea',
-  mixins: [baseInput],
+  mixins: [field],
   props: {
     name: {
       type: String,
@@ -85,14 +84,6 @@ export default {
       type: [Boolean, String],
       default: false
     },
-    focus: {
-      type: [Boolean, String],
-      default: false
-    },
-    autoFocus: {
-      type: [Boolean, String],
-      default: false
-    },
     placeholderClass: {
       type: String,
       default: 'textarea-placeholder'
@@ -156,13 +147,6 @@ export default {
     focus (val) {
       if (val) {
         this.focusChangeSource = 'focus'
-        if (this.$refs.textarea) {
-          this.$refs.textarea.focus()
-        }
-      } else {
-        if (this.$refs.textarea) {
-          this.$refs.textarea.blur()
-        }
       }
     },
     focusSync (val) {
@@ -214,6 +198,8 @@ export default {
       }
       $vm = $vm.$parent
     }
+
+    this._initField('textarea')
   },
   beforeDestroy () {
     this.$dispatch('Form', 'uni-form-group-update', {
@@ -222,7 +208,7 @@ export default {
     })
   },
   methods: {
-    _focus: function ($event) {
+    _onFocus: function ($event) {
       this.focusSync = true
       this.$trigger('focus', $event, {
         value: this.valueSync
@@ -239,20 +225,20 @@ export default {
         this.$refs.textarea.selectionEnd = this.$refs.textarea.selectionStart = this.cursorNumber
       }
     },
-    _blur: function ($event) {
+    _onBlur: function ($event) {
       this.focusSync = false
       this.$trigger('blur', $event, {
         value: this.valueSync,
         cursor: this.$refs.textarea.selectionEnd
       })
     },
-    _compositionstart ($event) {
+    _onCompositionstart ($event) {
       this.composition = true
     },
-    _compositionend ($event) {
+    _onCompositionend ($event) {
       this.composition = false
       // 部分输入法 compositionend 事件可能晚于 input
-      this._input($event)
+      this._onInput($event)
     },
     // 暂无完成按钮，此功能未实现
     _confirm ($event) {
@@ -265,13 +251,13 @@ export default {
         value: this.valueSync
       })
     },
-    _touchstart () {
+    _onTouchstart () {
       this.focusChangeSource = 'touch'
     },
     _resize ({ height }) {
       this.height = height
     },
-    _input ($event) {
+    _onInput ($event) {
       if (this.composition) {
         this.valueComposition = $event.target.value
         return

src/core/view/mixins/base-input.js → src/core/view/mixins/field.js

@@ -23,6 +23,10 @@ UniViewJSBridge.subscribe('getSelectedTextRange', function ({ pageId, callbackId
   }, pageId)
 })
 
+// App 延迟获取焦点
+const FOCUS_DELAY = 200
+let startTime
+
 export default {
   name: 'BaseInput',
   mixins: [emitter, keyboard],
@@ -34,6 +38,17 @@ export default {
     value: {
       type: [String, Number],
       default: ''
+    },
+    /**
+     * 已废弃属性，用于历史兼容
+     */
+    autoFocus: {
+      type: [Boolean, String],
+      default: false
+    },
+    focus: {
+      type: [Boolean, String],
+      default: false
     }
   },
   data () {
@@ -41,6 +56,20 @@ export default {
       valueSync: this._getValueString(this.value)
     }
   },
+  watch: {
+    focus (val) {
+      if (val) {
+        this._focus()
+      } else {
+        this._blur()
+      }
+    }
+  },
+  computed: {
+    needFocus () {
+      return this.autoFocus || this.focus
+    }
+  },
   created () {
     const valueChange = this.__valueChange = debounce((val) => {
       this.valueSync = this._getValueString(val)
@@ -62,6 +91,38 @@ export default {
   methods: {
     _getValueString (value) {
       return value === null ? '' : String(value)
+    },
+    _initField (ref) {
+      this._fieldRef = ref
+      startTime = startTime || Date.now()
+      if (this.needFocus) {
+        this._focus()
+      }
+    },
+    _focus () {
+      if (!this.needFocus) {
+        return
+      }
+      const field = this.$refs[this._fieldRef]
+      if (!field || (__PLATFORM__ === 'app-plus' && !window.plus)) {
+        setTimeout(this._focus.bind(this), 100)
+        return
+      }
+      if (__PLATFORM__ === 'h5') {
+        field.focus()
+      } else {
+        const timeout = FOCUS_DELAY - (Date.now() - startTime)
+        if (timeout > 0) {
+          setTimeout(this._focus.bind(this), timeout)
+          return
+        }
+        field.focus()
+        plus.key.showSoftKeybord()
+      }
+    },
+    _blur () {
+      const field = this.$refs[this._fieldRef]
+      field && field.blur()
     }
   }
 }

src/core/view/mixins/index.js

@@ -24,9 +24,9 @@ export {
   from './keyboard'
 
 export {
-  default as baseInput
+  default as field
 }
-  from './base-input'
+  from './field'
 
 export {
   default as interact

src/core/view/mixins/keyboard.js

@@ -7,12 +7,6 @@ import {
  */
 function iosHideKeyboard () { }
 
-function showSoftKeybord () {
-  plusReady(() => {
-    plus.key.showSoftKeybord()
-  })
-}
-
 function setSoftinputTemporary (vm, reset) {
   plusReady(() => {
     const MODE_ADJUSTRESIZE = 'adjustResize'
@@ -98,13 +92,6 @@ export default {
       default: true
     }
   },
-  watch: {
-    focus (val) {
-      if (val && __PLATFORM__ === 'app-plus') {
-        showSoftKeybord()
-      }
-    }
-  },
   directives: {
     keyboard: {
       inserted (el, binding, vnode) {
@@ -112,11 +99,6 @@ export default {
       }
     }
   },
-  mounted () {
-    if ((this.autoFocus || this.focus) && __PLATFORM__ === 'app-plus') {
-      showSoftKeybord()
-    }
-  },
   methods: {
     initKeyboard (el) {
       let focus