diff --git a/docs/component/input.md b/docs/component/input.md index b34e44afe863be4429fd56943cdac8983238587f..4e127932b5e6fd697a55b5f9d1d94f3167f7f1d2 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 f520888e39e98b1925bac2f1a3e6286d8223bee2..edd30a5af6370cf0d6fac7544e119ed32117b81f 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 0a5d957a9ed5ef39f934b9257a991361d73d8fd1..e4cb85791466d23b1c76cf03ada2f37570131e0d 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 8f989858cea28fb8a5df3badf5fb4694c37c5937..203f82216472153c6d982ba3eefba2286caf9ddd 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" />