import {
|
debounce,
|
throttle
|
} from 'uni-shared'
|
import emitter from './emitter'
|
import keyboard from './keyboard'
|
import interact from './interact'
|
|
UniViewJSBridge.subscribe('getSelectedTextRange', function ({ pageId, callbackId }) {
|
const activeElement = document.activeElement
|
const tagName = activeElement.tagName.toLowerCase()
|
const tagNames = ['input', 'textarea']
|
const data = {}
|
if (tagNames.includes(tagName)) {
|
data.errMsg = 'getSelectedTextRange:ok'
|
data.start = activeElement.selectionStart
|
data.end = activeElement.selectionEnd
|
} else {
|
data.errMsg = 'getSelectedTextRange:fail no focused'
|
}
|
UniViewJSBridge.publishHandler('onGetSelectedTextRange', {
|
callbackId,
|
data
|
}, pageId)
|
})
|
|
// App 延迟获取焦点
|
const FOCUS_DELAY = 200
|
let startTime
|
|
export default {
|
name: 'Field',
|
mixins: [emitter, keyboard, interact],
|
model: {
|
prop: 'value',
|
event: 'update:value'
|
},
|
props: {
|
value: {
|
type: [String, Number],
|
default: ''
|
},
|
/**
|
* 已废弃属性，用于历史兼容
|
*/
|
autoFocus: {
|
type: [Boolean, String],
|
default: false
|
},
|
focus: {
|
type: [Boolean, String],
|
default: false
|
},
|
cursor: {
|
type: [Number, String],
|
default: -1
|
},
|
selectionStart: {
|
type: [Number, String],
|
default: -1
|
},
|
selectionEnd: {
|
type: [Number, String],
|
default: -1
|
},
|
confirmHold: {
|
type: Boolean,
|
default: false
|
},
|
ignoreCompositionEvent: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data () {
|
return {
|
composing: false,
|
valueSync: this._getValueString(this.value, this.type),
|
focusSync: this.focus,
|
// Safari 14 以上修正禁用状态颜色
|
fixColor: String(navigator.vendor).indexOf('Apple') === 0 && CSS.supports('image-orientation:from-image')
|
}
|
},
|
watch: {
|
focus (val) {
|
if (val) {
|
this._focus()
|
} else {
|
this._blur()
|
}
|
},
|
focusSync (val) {
|
this.$emit('update:focus', val)
|
},
|
cursorNumber () {
|
this._checkCursor()
|
},
|
selectionStartNumber () {
|
this._checkSelection()
|
},
|
selectionEndNumber () {
|
this._checkSelection()
|
}
|
},
|
computed: {
|
needFocus () {
|
return this.autoFocus || this.focus
|
},
|
cursorNumber () {
|
var cursor = Number(this.cursor)
|
return isNaN(cursor) ? -1 : cursor
|
},
|
selectionStartNumber () {
|
var selectionStart = Number(this.selectionStart)
|
return isNaN(selectionStart) ? -1 : selectionStart
|
},
|
selectionEndNumber () {
|
var selectionEnd = Number(this.selectionEnd)
|
return isNaN(selectionEnd) ? -1 : selectionEnd
|
}
|
},
|
created () {
|
const valueChange = this.__valueChange = debounce((val) => {
|
this.valueSync = this._getValueString(val, this.type)
|
}, 100)
|
this.$watch('value', valueChange)
|
this.__triggerInput = throttle(($event, detail) => {
|
this.__valueChange.cancel()
|
this.$emit('update:value', detail.value)
|
this.$trigger('input', $event, detail)
|
}, 100)
|
this.$triggerInput = ($event, detail, force) => {
|
this.__valueChange.cancel()
|
this.__triggerInput($event, detail)
|
if (force) {
|
this.__triggerInput.flush()
|
}
|
}
|
},
|
beforeDestroy () {
|
this.__valueChange.cancel()
|
this.__triggerInput.cancel()
|
},
|
directives: {
|
field: {
|
inserted (el, binding, vnode) {
|
vnode.context._initField(el)
|
}
|
}
|
},
|
methods: {
|
_getValueString (value, type) {
|
if (type === 'number' && isNaN(Number(value))) {
|
value = ''
|
}
|
return value === null ? '' : String(value)
|
},
|
_initField (el) {
|
this._field = el
|
startTime = startTime || Date.now()
|
if (this.needFocus) {
|
setTimeout(() => {
|
this._focus()
|
})
|
}
|
},
|
_focus () {
|
if (!this.needFocus) {
|
return
|
}
|
const field = this._field
|
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()
|
// 无用户交互的 webview 需主动显示键盘（安卓）
|
if (!this.userInteract) {
|
plus.key.showSoftKeybord()
|
}
|
}
|
},
|
_blur () {
|
const field = this._field
|
field && field.blur()
|
},
|
_onFocus ($event) {
|
this.focusSync = true
|
this.$trigger('focus', $event, {
|
value: this.valueSync
|
})
|
// 从 watch:focusSync 中移出到这里。在watcher中如果focus初始值为ture，则不会执行以下逻辑
|
this._checkSelection()
|
this._checkCursor()
|
},
|
_onBlur ($event) {
|
// iOS 输入法 compositionend 事件可能晚于 blur
|
if (this.composing) {
|
this.composing = false
|
this._onInput($event, true)
|
}
|
this.focusSync = false
|
const field = $event.target
|
let cursor
|
if (field.type === 'number') {
|
field.type = 'text'
|
cursor = field.selectionEnd
|
field.type = 'number'
|
} else {
|
cursor = field.selectionEnd
|
}
|
this.$trigger('blur', $event, {
|
value: this.valueSync,
|
cursor
|
})
|
},
|
_checkSelection () {
|
const field = this._field
|
if (this.focusSync && this.selectionStartNumber > -1 && this.selectionEndNumber > -1 && field.type !== 'number') {
|
field.selectionStart = this.selectionStartNumber
|
field.selectionEnd = this.selectionEndNumber
|
}
|
},
|
_checkCursor () {
|
const field = this._field
|
if (this.focusSync && this.selectionStartNumber < 0 && this.selectionEndNumber < 0 && this.cursorNumber > -1 && field.type !== 'number') {
|
field.selectionEnd = field.selectionStart = this.cursorNumber
|
}
|
}
|
}
|
}
|
