diff --git a/example/pages/field/index.js b/example/pages/field/index.js index 4a20bf65..17ccdb1f 100644 --- a/example/pages/field/index.js +++ b/example/pages/field/index.js @@ -16,5 +16,20 @@ Page({ icon: 'none', title: '点击图标' }); + }, + + onFieldChange({ detail }) { + console.log('change', detail); + this.setData({ + sms: detail + }); + }, + + onFieldBlur({ detail }) { + console.log('blur', detail); + }, + + onSendSms() { + console.log('onSendSms', this.data.sms); } }); diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml index 43863b8a..782ee684 100644 --- a/example/pages/field/index.wxml +++ b/example/pages/field/index.wxml @@ -81,8 +81,10 @@ placeholder="请输入短信验证码" use-button-slot border="{{ false }}" + bind:change="onFieldChange" + bind:blur="onFieldBlur" > - 发送验证码 + 发送验证码 diff --git a/packages/field/index.ts b/packages/field/index.ts index f25bad44..851ced20 100644 --- a/packages/field/index.ts +++ b/packages/field/index.ts @@ -76,8 +76,7 @@ VantComponent({ value, showClear: this.getShowClear(value) }, () => { - this.$emit('input', value); - this.$emit('change', value); + this.emitChange(value); }); }, @@ -85,6 +84,7 @@ VantComponent({ const { value = '', height = 0 } = event.detail || {}; this.$emit('focus', { value, height }); this.focused = true; + this.blurFromClear = false; this.set({ showClear: this.getShowClear() }); @@ -94,9 +94,21 @@ VantComponent({ const { value = '', cursor = 0 } = event.detail || {}; this.$emit('blur', { value, cursor }); this.focused = false; - this.set({ - showClear: this.getShowClear() - }); + const showClear = this.getShowClear(); + + if (this.data.value === value) { + this.set({ + showClear + }); + } else if (!this.blurFromClear) { + // fix: the handwritten keyboard does not trigger input change + this.set({ + value, + showClear + }, () => { + this.emitChange(value); + }); + } }, onClickIcon() { @@ -111,18 +123,23 @@ VantComponent({ }, onClear() { + this.blurFromClear = true; this.set({ value: '', showClear: this.getShowClear('') }, () => { - this.$emit('input', ''); - this.$emit('change', ''); + this.emitChange(''); this.$emit('clear', ''); }); }, onConfirm() { this.$emit('confirm', this.data.value); + }, + + emitChange(value) { + this.$emit('input', value); + this.$emit('change', value); } } });