Skip to content

H
hls-easy-ui
Commit 6d21b97c authored by 24776's avatar 24776
Browse files
Options

android键盘

parent b521c217
Show whitespace changes
Inline Side-by-side
Showing with 40 additions and 110 deletions
packages/components/HContent/index.vue
View file @ 6d21b97c
......@@ -39,128 +39,54 @@ export default {
lastClickTime: 0,
startY: 0, // 触摸位置
endY: 0, // 结束位置
distance: 0, //android应该滚动距离
docmHeight: 0, // 默认屏幕高度
showHeight: 0, // 实时屏幕高度
topHeight: 0, // content距离顶部的高度
contentsHeight: 0, // 内容区域本来高度
isResize: false, // 默认屏幕高度是否已获取
}
},
watch: {
},
mounted () {
if (this.calContent) {
this.contentHeight()
}
/* document.body.addEventListener('touchstart', (event) => {
if (event.target.readOnly) return
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
startTouches = event.changedTouches[0]
}
console.log('touchStartTime:' + event.timeStamp)
if ((event.timeStamp - lastClickTime) < tapDelay) {
event.preventDefault()
}
}) */
/* document.body.addEventListener('touchend', (event) => {
if ((event.timeStamp - lastClickTime) < tapDelay) return
debugger
console.log('touchEndTime:' + event.timeStamp)
lastClickTime = event.timeStamp
let keyboardHeight = this.getKeyBoardHeight()
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
let pointY = startTouches.clientY
let scrollTop = (this.winHeight - pointY) < keyboardHeight ? (keyboardHeight - (this.winHeight - pointY)) : 0
if (scrollTop) {
'showHeight': function () {
if (detectOS() !== 'ios') {
if (this.docmHeight >= this.showHeight) {
// 软键盘弹出的事件处理
let activeElement = document.activeElement
let offsetTop = activeElement.offsetTop
let offsetParent = activeElement.offsetParent
let viewTop = offsetParent.clientHeight
this.topHeight = this.$el.offsetTop
if (activeElement === document.body) {
return
}
while (offsetParent !== document.body) {
offsetTop += offsetParent.offsetTop
offsetParent = offsetParent.offsetParent
}
offsetTop = this.docmHeight - offsetTop - viewTop < 0 ? offsetTop - this.topHeight - viewTop : 0
if (offsetTop > 0) {
this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
this.$el.style.transform = 'translate(0px, -' + scrollTop + 'px) scale(1) translateZ(0px)'
this.$el.style.paddingBottom = (scrollTop + 20) + 'px'
this.$el.style.height = parseInt(this.height) + scrollTop + 'px'
this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
}
event.target.focus()
}
}) */
/* document.body.addEventListener('focusin', () => {
// this.final = this.final + this.distance
console.log('distance:' + this.distance)
// this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
// this.$el.style.height = parseInt(this.contentsHeight) + this.distance + 'px'
// this.$el.style.transform = 'translate(0px, -' + this.distance + 'px) scale(1) translateZ(0px)'
let node = document.activeElement
setTimeout(() => {
if (node) {
if (node) {
if (node.nodeName === 'TEXTAREA' || node.nodeName === 'INPUT') { // 如果是input或textarea
if (node.style.textShadow === '') {
node.style.textShadow = 'rgba(0,0,0,0) 0 0 0' // 改变某个不可见样式，触发dom重绘
node.scrollIntoView()
node.focus()
} else {
node.style.textShadow = ''
}
// 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
}
}
},
},
mounted () {
if (this.calContent) {
this.contentHeight()
}
}, 100)
// this.$el.scrollTop = this.final
}) */
// document.body.addEventListener('focusout', () => {
// if (detectOS() === 'ios') {
// document.body.addEventListener('focusin', () => {
// // 软键盘弹出的事件处理
// let keyboardHeight = this.getKeyBoardHeight()
// let activeElement = document.activeElement
// let offsetTop = activeElement.offsetTop
// let offsetParent = activeElement.offsetParent
// if (activeElement === document.body) {
// return
// }
// while (offsetParent !== document.body) {
// offsetTop += offsetParent.offsetTop
// offsetParent = offsetParent.offsetParent
// }
// offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
// if (offsetTop > 0) {
// this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
// this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
// this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
// }
// })
this.contentsHeight = this.$el.style.height.slice(0, this.$el.style.height.length - 2)
document.body.addEventListener('focusout', () => {
// 软键盘收起的事件处理
this.$el.style.height = parseInt(this.contentsHeight) + 'px'
this.$el.style.transform = 'translate(0px, 0px) scale(1) translateZ(0px)'
})
// document.body.addEventListener('focusin', () => {
// // 软键盘弹出的事件处理
// let keyboardHeight = this.getKeyBoardHeight()
// let activeElement = document.activeElement
// let offsetTop = activeElement.offsetTop
// let i = 0
// console.log(offsetTop, 11)
// let offsetParent = activeElement.offsetParent
// if (activeElement === document.body) {
// return
// }
// while (offsetParent !== document.body) {
// i++
// offsetTop += offsetParent.offsetTop
// console.log(offsetParent, i)
// console.log(offsetParent.offsetTop, 'offsetParent', i)
// offsetParent = offsetParent.offsetParent
// console.log(offsetTop, i, 'top')
// }
// // console.log(this.$el)
// // console.log(this.$el.offsetTop, 'top')
// // console.log(this.$el.style.height)
// // console.log(innerHeight - offsetTop)
// offsetTop = (innerHeight - offsetTop) < keyboardHeight ? (keyboardHeight - (innerHeight - offsetTop)) : 0
// console.log(offsetTop)
// if (offsetTop > 0) {
// this.$el.style.transition = 'all .2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
// this.$el.style.transform = 'translate(0px, -' + offsetTop + 'px) scale(1) translateZ(0px)'
// this.$el.style.height = parseInt(this.contentsHeight) + offsetTop + 'px'
// }
// })
// }
// 当视图窗口大小发生改变时
window.onresize = () => {
return (() => {
......@@ -176,14 +102,17 @@ export default {
},
methods: {
touchStart (event) {
let keyboardHeight = this.getKeyBoardHeight()
this.firstClickTime = event.timeStamp
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
if (event.target.readOnly) return
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
this.startY = event.changedTouches[0].clientY
this.distance = (innerHeight - this.startY) < keyboardHeight ? (keyboardHeight - (innerHeight - this.startY) + 20) : 0
}
},
touchEnd (event) {
if(detectOS() === 'ios'){
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) return
this.lastClickTime = event.timeStamp
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA') {
......@@ -199,6 +128,7 @@ export default {
}
event.target.focus()
}
}
},
getHeaderHeight () {
let vm = this
......@@ -265,7 +195,7 @@ export default {
}
return 400
} else {
return 300
return 330
}
},
},
......
www.zip
View file @ 6d21b97c
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment