提交 345ec106 编写于 作者: L liuxiaohang

1. text and textarea add the 'enterkeyhint' params

2. textarea add the 'confirm' event
3. update text and textarea doc
上级 c9a04704
......@@ -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端软键盘上方横条去除方案
......
......@@ -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。
......
......@@ -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"
>
<input
v-if="disabled && fixColor"
......@@ -42,6 +43,7 @@
:type="inputType"
:maxlength="maxlength"
:step="step"
:enterkeyhint="confirmType"
class="uni-input-input"
>
</div>
......@@ -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) {
......
......@@ -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"
/>
<textarea
v-if="disabled && fixColor"
......@@ -54,6 +57,7 @@
:maxlength="maxlengthNumber"
:class="{ 'uni-textarea-textarea-fix-margin': fixMargin }"
:style="{ 'overflow-y': autoHeight ? 'hidden' : 'auto' }"
:enterkeyhint="confirmType"
class="uni-textarea-textarea"
/>
</div>
......@@ -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, {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册