提交 6f20c0a3 编写于 作者: Q qiang

fix: v3-app focus 事件增加键盘高度信息

上级 d9c3f76b
<template> <template>
<uni-input <uni-input
@change.stop @change.stop
v-on="$listeners"> v-on="$listeners">
<div <div
ref="wrapper" ref="wrapper"
...@@ -33,13 +33,14 @@ ...@@ -33,13 +33,14 @@
</template> </template>
<script> <script>
import { import {
emitter emitter,
keyboard
} from 'uni-mixins' } from 'uni-mixins'
const INPUT_TYPES = ['text', 'number', 'idcard', 'digit', 'password'] const INPUT_TYPES = ['text', 'number', 'idcard', 'digit', 'password']
const NUMBER_TYPES = ['number', 'digit'] const NUMBER_TYPES = ['number', 'digit']
export default { export default {
name: 'Input', name: 'Input',
mixins: [emitter], mixins: [emitter, keyboard],
model: { model: {
prop: 'value', prop: 'value',
event: 'update:value' event: 'update:value'
...@@ -165,6 +166,8 @@ export default { ...@@ -165,6 +166,8 @@ export default {
$vm = $vm.$parent $vm = $vm.$parent
} }
this.initKeyboard(this.$refs.input)
this.focus && this._focusInput() this.focus && this._focusInput()
}, },
beforeDestroy () { beforeDestroy () {
...@@ -308,7 +311,7 @@ uni-input[hidden] { ...@@ -308,7 +311,7 @@ uni-input[hidden] {
height: 100%; height: 100%;
background: none; background: none;
color: inherit; color: inherit;
opacity: 1; opacity: 1;
-webkit-text-fill-color: currentcolor; -webkit-text-fill-color: currentcolor;
font: inherit; font: inherit;
line-height: inherit; line-height: inherit;
......
...@@ -51,11 +51,12 @@ ...@@ -51,11 +51,12 @@
</template> </template>
<script> <script>
import { import {
emitter emitter,
keyboard
} from 'uni-mixins' } from 'uni-mixins'
export default { export default {
name: 'Textarea', name: 'Textarea',
mixins: [emitter], mixins: [emitter, keyboard],
model: { model: {
prop: 'value', prop: 'value',
event: 'update:value' event: 'update:value'
...@@ -210,6 +211,7 @@ export default { ...@@ -210,6 +211,7 @@ export default {
this._resize({ this._resize({
height: this.$refs.sensor.$el.offsetHeight height: this.$refs.sensor.$el.offsetHeight
}) })
this.initKeyboard(this.$refs.textarea)
}, },
beforeDestroy () { beforeDestroy () {
this.$dispatch('Form', 'uni-form-group-update', { this.$dispatch('Form', 'uni-form-group-update', {
......
...@@ -16,4 +16,9 @@ export { ...@@ -16,4 +16,9 @@ export {
export { export {
default as subscriber default as subscriber
} }
from './subscriber' from './subscriber'
export {
default as keyboard
}
from './keyboard'
function hideKeyboard () {
document.activeElement.blur()
}
export default {
name: 'Keyboard',
beforeDestroy () {
UniViewJSBridge.unsubscribe('hideKeyboard', hideKeyboard)
},
methods: {
initKeyboard (el) {
el.addEventListener('focus', () => {
UniViewJSBridge.subscribe('hideKeyboard', hideKeyboard)
})
el.addEventListener('blur', () => {
UniViewJSBridge.unsubscribe('hideKeyboard', hideKeyboard)
})
}
}
}
import {
onMethod,
getCurrentPageId
} from '../../../../../core/service/platform'
const isAndroid = plus.os.name.toLowerCase() === 'android'
const FOCUS_TIMEOUT = isAndroid ? 300 : 700
const HIDE_TIMEOUT = 300
let keyboardHeight = 0
let onKeyboardShow
let focusTimer
let hideKeyboardTimeout
export function hookKeyboardEvent (event, callback) {
onKeyboardShow = null
focusTimer && clearTimeout(focusTimer)
if (event.type === 'focus') {
if (keyboardHeight > 0) {
event.detail.height = keyboardHeight
} else {
focusTimer = setTimeout(function () {
event.detail.height = keyboardHeight
callback(event)
}, FOCUS_TIMEOUT)
onKeyboardShow = function () {
clearTimeout(focusTimer)
event.detail.height = keyboardHeight
callback(event)
}
return
}
}
callback(event)
}
onMethod('onKeyboardHeightChange', res => {
keyboardHeight = res.height
if (keyboardHeight > 0) {
onKeyboardShow && onKeyboardShow()
if (hideKeyboardTimeout) {
clearTimeout(hideKeyboardTimeout)
hideKeyboardTimeout = null
}
} else {
// 仅安卓收起键盘时通知view层失去焦点
if (isAndroid) {
hideKeyboardTimeout = setTimeout(function () {
hideKeyboardTimeout = null
var pageId = getCurrentPageId()
UniServiceJSBridge.publishHandler('hideKeyboard', {}, pageId)
}, HIDE_TIMEOUT)
}
}
})
...@@ -20,6 +20,10 @@ import { ...@@ -20,6 +20,10 @@ import {
vdSyncCallbacks vdSyncCallbacks
} from '../subscribe-handlers/on-vd-sync-callback' } from '../subscribe-handlers/on-vd-sync-callback'
import {
hookKeyboardEvent
} from './keyboard'
function wrapperEvent (event) { function wrapperEvent (event) {
event.preventDefault = noop event.preventDefault = noop
event.stopPropagation = noop event.stopPropagation = noop
...@@ -37,7 +41,15 @@ const handleVdData = { ...@@ -37,7 +41,15 @@ const handleVdData = {
if (!target) { if (!target) {
return console.error(`event handler[${cid}][${nid}] not found`) return console.error(`event handler[${cid}][${nid}] not found`)
} }
target.dispatchEvent(event.type, wrapperEvent(event)) const type = event.type
const mpEvent = wrapperEvent(event)
if (type === 'focus' || type === 'blur') {
hookKeyboardEvent(mpEvent, event => {
target.dispatchEvent(type, event)
})
} else {
target.dispatchEvent(type, mpEvent)
}
}) })
} }
} }
...@@ -181,4 +193,4 @@ export class VDomSync { ...@@ -181,4 +193,4 @@ export class VDomSync {
this.elements.length = 0 this.elements.length = 0
removeVdSync(this.pageId) removeVdSync(this.pageId)
} }
} }
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册