From cb23882825478462b8af28bb48ebc063a060e2d9 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Tue, 23 Mar 2021 16:47:28 +0800 Subject: [PATCH] =?UTF-8?q?fix:=201.=20=E4=BF=AE=E5=A4=8D=20input=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6cursor=E3=80=81selectionStart=E3=80=81selecti?= =?UTF-8?q?onEnd=E5=B1=9E=E6=80=A7=E6=97=A0=E6=95=88=202.=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20=E7=A7=BB=E9=99=A4textarea=E7=BB=84=E4=BB=B6cursor?= =?UTF-8?q?=E3=80=81selectionStart=E3=80=81selectionEnd=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E4=BB=85=E5=9C=A8=E8=AE=BE=E7=BD=AE=E8=87=AA=E5=8A=A8=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E7=84=A6=E7=82=B9=E6=97=B6=E7=94=9F=E6=95=88=203.=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E5=BD=93=E8=87=AA=E5=8A=A8=E8=8E=B7?= =?UTF-8?q?=E5=8F=96=E7=84=A6=E7=82=B9=E6=97=B6=EF=BC=8Ccursor=E3=80=81sel?= =?UTF-8?q?ectionStart=E3=80=81selectionEnd=E5=B1=9E=E6=80=A7=E6=97=A0?= =?UTF-8?q?=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/view/components/input/index.vue | 20 +----- src/core/view/components/textarea/index.vue | 73 +------------------- src/core/view/mixins/field.js | 74 ++++++++++++++++++++- 3 files changed, 75 insertions(+), 92 deletions(-) diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue index b5737a900..5a4b23ed8 100644 --- a/src/core/view/components/input/index.vue +++ b/src/core/view/components/input/index.vue @@ -98,12 +98,9 @@ export default { }, data () { return { - composing: false, valid: true, wrapperHeight: 0, - cachedValue: '', - // Safari 14 以上修正禁用状态颜色 - fixColor: String(navigator.vendor).indexOf('Apple') === 0 && CSS.supports('image-orientation:from-image') + cachedValue: '' } }, computed: { @@ -212,21 +209,6 @@ export default { value: this.valueSync }, force) }, - _onFocus ($event) { - this.$trigger('focus', $event, { - value: $event.target.value - }) - }, - _onBlur ($event) { - // iOS 输入法 compositionend 事件可能晚于 blur - if (this.composing) { - this.composing = false - this._onInput($event, true) - } - this.$trigger('blur', $event, { - value: $event.target.value - }) - }, _onComposition ($event) { if ($event.type === 'compositionstart') { this.composing = true diff --git a/src/core/view/components/textarea/index.vue b/src/core/view/components/textarea/index.vue index b85f0f502..9dd2e9bcc 100644 --- a/src/core/view/components/textarea/index.vue +++ b/src/core/view/components/textarea/index.vue @@ -100,18 +100,6 @@ export default { type: [Boolean, String], default: false }, - cursor: { - type: [Number, String], - default: -1 - }, - selectionStart: { - type: [Number, String], - default: -1 - }, - selectionEnd: { - type: [Number, String], - default: -1 - }, confirmType: { type: String, default: '' @@ -120,14 +108,10 @@ export default { data () { return { valueComposition: '', - composing: false, - focusSync: this.focus, height: 0, focusChangeSource: '', // iOS 13 以下版本需要修正边距 - fixMargin: String(navigator.platform).indexOf('iP') === 0 && String(navigator.vendor).indexOf('Apple') === 0 && window.matchMedia(DARK_TEST_STRING).media !== DARK_TEST_STRING, - // Safari 14 以上修正禁用状态颜色 - fixColor: String(navigator.vendor).indexOf('Apple') === 0 && CSS.supports('image-orientation:from-image') + fixMargin: String(navigator.platform).indexOf('iP') === 0 && String(navigator.vendor).indexOf('Apple') === 0 && window.matchMedia(DARK_TEST_STRING).media !== DARK_TEST_STRING } }, computed: { @@ -135,18 +119,6 @@ export default { var maxlength = Number(this.maxlength) return isNaN(maxlength) ? 140 : maxlength }, - 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 - }, valueCompute () { return (this.composing ? this.valueComposition : this.valueSync).split('\n') }, @@ -160,20 +132,6 @@ export default { this.focusChangeSource = 'focus' } }, - focusSync (val) { - this.$emit('update:focus', val) - this._checkSelection() - this._checkCursor() - }, - cursorNumber () { - this._checkCursor() - }, - selectionStartNumber () { - this._checkSelection() - }, - selectionEndNumber () { - this._checkSelection() - }, height (height) { let lineHeight = parseFloat(getComputedStyle(this.$el).lineHeight) if (isNaN(lineHeight)) { @@ -228,35 +186,6 @@ export default { this.$refs.textarea.blur() } }, - _onFocus: function ($event) { - this.focusSync = true - this.$trigger('focus', $event, { - value: this.valueSync - }) - }, - _checkSelection () { - if (this.focusSync && (!this.focusChangeSource) && this.selectionStartNumber > -1 && this.selectionEndNumber > -1) { - this.$refs.textarea.selectionStart = this.selectionStartNumber - this.$refs.textarea.selectionEnd = this.selectionEndNumber - } - }, - _checkCursor () { - if (this.focusSync && (this.focusChangeSource === 'focus' || ((!this.focusChangeSource) && this.selectionStartNumber < 0 && this.selectionEndNumber < 0)) && this.cursorNumber > -1) { - this.$refs.textarea.selectionEnd = this.$refs.textarea.selectionStart = this.cursorNumber - } - }, - _onBlur: function ($event) { - // iOS 输入法 compositionend 事件可能晚于 blur - if (this.composing) { - this.composing = false - this._onInput($event, true) - } - this.focusSync = false - this.$trigger('blur', $event, { - value: this.valueSync, - cursor: this.$refs.textarea.selectionEnd - }) - }, _onCompositionstart ($event) { this.composing = true }, diff --git a/src/core/view/mixins/field.js b/src/core/view/mixins/field.js index 8ff986908..1645a729a 100644 --- a/src/core/view/mixins/field.js +++ b/src/core/view/mixins/field.js @@ -49,11 +49,27 @@ export default { focus: { type: [Boolean, String], default: false + }, + cursor: { + type: [Number, String], + default: -1 + }, + selectionStart: { + type: [Number, String], + default: -1 + }, + selectionEnd: { + type: [Number, String], + default: -1 } }, data () { return { - valueSync: this._getValueString(this.value) + composing: false, + valueSync: this._getValueString(this.value), + focusSync: this.focus, + // Safari 14 以上修正禁用状态颜色 + fixColor: String(navigator.vendor).indexOf('Apple') === 0 && CSS.supports('image-orientation:from-image') } }, watch: { @@ -63,11 +79,35 @@ export default { } 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 () { @@ -133,6 +173,38 @@ export default { _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 + this.$trigger('blur', $event, { + value: this.valueSync, + cursor: $event.target.selectionEnd + }) + }, + _checkSelection () { + if (this.focusSync && this.selectionStartNumber > -1 && this.selectionEndNumber > -1) { + this._field.selectionStart = this.selectionStartNumber + this._field.selectionEnd = this.selectionEndNumber + } + }, + _checkCursor () { + if (this.focusSync && this.selectionStartNumber < 0 && this.selectionEndNumber < 0 && this.cursorNumber > -1) { + this._field.selectionEnd = this._field.selectionStart = this.cursorNumber + } } } } -- GitLab