From 345ec1060bc58d771f3346a03828af0770f37a3d Mon Sep 17 00:00:00 2001
From: liuxiaohang <283700113@qq.com>
Date: Tue, 3 Nov 2020 16:34:42 +0800
Subject: [PATCH] 1. text and textarea add the 'enterkeyhint' params 2.
textarea add the 'confirm' event 3. update text and textarea doc
---
docs/component/input.md | 3 ++-
docs/component/textarea.md | 16 ++++++++++++++-
src/core/view/components/input/index.vue | 12 +++++------
src/core/view/components/textarea/index.vue | 22 +++++++++++++++++++++
4 files changed, 45 insertions(+), 8 deletions(-)
diff --git a/docs/component/input.md b/docs/component/input.md
index b34e44afe..4e127932b 100644
--- a/docs/component/input.md
+++ b/docs/component/input.md
@@ -16,7 +16,7 @@
|maxlength|Number|140|最大输入长度,设置为 -1 的时候不限制最大长度||
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、QQ小程序|
|focus|Boolean|false|获取焦点。|在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。|
-|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。||
+|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。|微信小程序基础库2.13.0、APP(HBuilder X2.9.8+)、H5(HBuilder X2.9.8+)|
|confirm-hold|Boolean|false|点击键盘右下角按钮时是否保持键盘不收起|App、微信小程序、支付宝小程序、百度小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置||
|selection-start|Number|-1|光标起始位置,自动聚集时有效,需与selection-end搭配使用||
@@ -68,6 +68,7 @@
- App平台的nvue页面,如果是uni-app编译模式,直接使用此属性设置即可生效。如果是weex编译模式,需通过weex的api设置,[weex相关文档参考](https://weex.apache.org/zh/docs/components/input.html#%E5%B1%9E%E6%80%A7)
- App平台的vue页面不支持控制键盘右下角为“发送”,涉及聊天的建议使用nvue。
+- confirm-type属性仅在Chrome 77+、IOS 13.4+、Android 5-6.x WebView: Chromium 81+支持。
#### App平台iOS端软键盘上方横条去除方案
diff --git a/docs/component/textarea.md b/docs/component/textarea.md
index f520888e3..edd30a5af 100644
--- a/docs/component/textarea.md
+++ b/docs/component/textarea.md
@@ -17,6 +17,7 @@
|fixed|Boolean|false|如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true|微信小程序、百度小程序、字节跳动小程序、QQ小程序|
|cursor-spacing|Number|0|指定光标与键盘的距离,单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离|App、微信小程序、百度小程序、字节跳动小程序、QQ小程序|
|cursor|Number||指定focus时的光标位置|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
+|confirm-type|String|done|设置键盘右下角按钮的文字,仅在 type="text" 时生效。|微信小程序基础库2.13.0、APP(HBuilder X2.9.8+)、H5(HBuilder X2.9.8+)|
|show-confirm-bar|Boolean|true|是否显示键盘上方带有”完成“按钮那一栏|微信小程序、百度小程序、QQ小程序|
|selection-start|Number|-1|光标起始位置,自动聚焦时有效,需与selection-end搭配使用|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
|selection-end|Number|-1|光标结束位置,自动聚焦时有效,需与selection-start搭配使用|微信小程序、App、H5、百度小程序、字节跳动小程序、QQ小程序|
@@ -28,7 +29,19 @@
|@linechange|EventHandle||输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0}|字节跳动小程序不支持,nvue ios暂不支持|
|@input|EventHandle||当键盘输入时,触发 input 事件,event.detail = {value, cursor}, @input 处理函数的返回值并不会反映到 textarea 上||
|@confirm|EventHandle||点击完成时, 触发 confirm 事件,event.detail = {value: value}|微信小程序、百度小程序、QQ小程序|
-|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|微信小程序2.7.0|
+|@keyboardheightchange|Eventhandle||键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}|微信小程序2.7.0|
+
+
+**confirm-type 有效值**
+
+
+|值|说明|平台差异说明|
+|:-|:-|-|
+|send|右下角按钮为“发送”|微信、支付宝、百度小程序、App的nvue|
+|search|右下角按钮为“搜索”||
+|next|右下角按钮为“下一个”|微信、支付宝、百度小程序、App的nvue|
+|go|右下角按钮为“前往”||
+|done|右下角按钮为“完成”|微信、支付宝、百度小程序、App的nvue|
**示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/textarea/textarea)
@@ -74,6 +87,7 @@ export default {
- 如果遇到 focus 属性设置不生效的问题参考:[组件属性设置不生效解决办法](/use?id=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)
- 软键盘的弹出和收起逻辑,详见[input的文档](/component/input?id=app%E5%B9%B3%E5%8F%B0ios%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E4%B8%8A%E6%96%B9%E6%A8%AA%E6%9D%A1%E5%8E%BB%E9%99%A4%E6%96%B9%E6%A1%88)
- 如需禁止点击其他位置收起键盘的默认行为,可以监听`touch`事件并使用`prevent`修饰符(仅支持App-v3、H5,其他平台可以通过设置`focus`来使输入框重新获取焦点),例如在确认按钮上使用:```@touchend.prevent="onTap"```
+- confirm-type属性仅在Chrome 77+、IOS 13.4+、Android 5-6.x WebView: Chromium 81+支持。
**富文本编辑的解决方案**
在输入框里图文混排内容,在web上该功能依赖document,而小程序和app的正常页面又没有document。
diff --git a/src/core/view/components/input/index.vue b/src/core/view/components/input/index.vue
index 0a5d957a9..e4cb85791 100644
--- a/src/core/view/components/input/index.vue
+++ b/src/core/view/components/input/index.vue
@@ -24,6 +24,7 @@
:type="inputType"
:maxlength="maxlength"
:step="step"
+ :enterkeyhint="confirmType"
class="uni-input-input"
autocomplete="off"
@focus="_onFocus"
@@ -31,7 +32,7 @@
@input.stop="_onInput"
@compositionstart="_onComposition"
@compositionend="_onComposition"
- @keyup.stop="_onKeyup"
+ @keyup.enter.stop="_onKeyup"
>
@@ -171,11 +173,9 @@ export default {
},
methods: {
_onKeyup ($event) {
- if ($event.keyCode === 13) {
- this.$trigger('confirm', $event, {
- value: $event.target.value
- })
- }
+ this.$trigger('confirm', $event, {
+ value: $event.target.value
+ })
},
_onInput ($event) {
if (this.composing) {
diff --git a/src/core/view/components/textarea/index.vue b/src/core/view/components/textarea/index.vue
index 8f989858c..203f82216 100644
--- a/src/core/view/components/textarea/index.vue
+++ b/src/core/view/components/textarea/index.vue
@@ -37,6 +37,7 @@
:maxlength="maxlengthNumber"
:class="{ 'uni-textarea-textarea-fix-margin': fixMargin }"
:style="{ 'overflow-y': autoHeight ? 'hidden' : 'auto' }"
+ :enterkeyhint="confirmType"
class="uni-textarea-textarea"
@compositionstart="_onCompositionstart"
@compositionend="_onCompositionend"
@@ -44,6 +45,8 @@
@focus="_onFocus"
@blur="_onBlur"
@touchstart.passive="_onTouchstart"
+ @keyup.enter="_onKeyUpEnter"
+ @keydown.enter="_onKeyDownEnter"
/>
@@ -107,6 +111,10 @@ export default {
selectionEnd: {
type: [Number, String],
default: -1
+ },
+ confirmType: {
+ type: String,
+ default: ''
}
},
data () {
@@ -141,6 +149,9 @@ export default {
},
valueCompute () {
return (this.composition ? this.valueComposition : this.valueSync).split('\n')
+ },
+ isDone () {
+ return ['done', 'go', 'next', 'search', 'send'].includes(this.confirmType)
}
},
watch: {
@@ -208,6 +219,17 @@ export default {
})
},
methods: {
+ _onKeyDownEnter: function ($event) {
+ if (this.isDone) {
+ $event.preventDefault()
+ }
+ },
+ _onKeyUpEnter: function ($event) {
+ if (this.isDone) {
+ this._confirm($event)
+ this.$refs.textarea.blur()
+ }
+ },
_onFocus: function ($event) {
this.focusSync = true
this.$trigger('focus', $event, {
--
GitLab