diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue index 500be7ad22fc27ff36916086675e03dc49277a6b..5315bc9261bd412359bf626496f0b679d20d7f79 100644 --- a/src/core/view/components/input/index.vue +++ b/src/core/view/components/input/index.vue @@ -18,6 +18,7 @@ { + 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() + }) } } } diff --git a/src/platforms/app-plus/service/framework/plugins/keyboard.js b/src/platforms/app-plus/service/framework/plugins/keyboard.js index 6367d08f64af12d1dbbdc805f6789d25e2e39b83..b091e8e56edd1bd45d108b9168a1c7b379a583ea 100644 --- a/src/platforms/app-plus/service/framework/plugins/keyboard.js +++ b/src/platforms/app-plus/service/framework/plugins/keyboard.js @@ -1,15 +1,12 @@ 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) - } } })