From 9ceb2e807e33edd3937db5f57a4306f1ce719cff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=8D=E5=A6=82=E6=91=B8=E9=B1=BC=E5=8E=BB?= <1780903673@qq.com> Date: Mon, 9 Dec 2024 21:11:27 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Input=E3=80=81Textarea?= =?UTF-8?q?=E5=9C=A8APP-VUE=E5=92=8CH5=E7=AB=AF=E6=94=AF=E6=8C=81inputmode?= =?UTF-8?q?=20(#771)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #743 --- docs/component/input.md | 19 ++++++++++++++++++- docs/component/textarea.md | 19 +++++++++++++++++++ .../components/wd-input/types.ts | 11 ++++++++++- .../components/wd-input/wd-input.vue | 1 + .../components/wd-textarea/types.ts | 11 +++++++++-- .../components/wd-textarea/wd-textarea.vue | 1 + 6 files changed, 58 insertions(+), 4 deletions(-) diff --git a/docs/component/input.md b/docs/component/input.md index 474c7cea..00095d6a 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -171,9 +171,26 @@ function handleChange(event) { | clearTrigger | 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示 | `InputClearTrigger` | `focus` / `always` | `always` | 1.3.7 | | focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | true | 1.3.7 | | ignoreCompositionEvent | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件。 | boolean | - | true | 1.3.11| +| inputmode | 提供用户在编辑元素或其内容时可能输入的数据类型的提示。 | InputMode | - | text | $LOWEST_VERSION$ | +### InputMode 可选值 -### FormItemRule 数据结构 +>新增于 uni-app 3.6.16+ inputmode是html规范后期更新的内容。各家小程序还未支持此属性。 + +在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性，参见[inputmode](https://uniapp.dcloud.net.cn/component/input.html#inputmode)。 + +| 值 | 说明 | +|---------|----------------------------------------------------------------------------------------------------------------------| +| none | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 | +| text | 使用用户本地区域设置的标准文本输入键盘。 | +| decimal | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 | +| numeric | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 | +| tel | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 。 | +| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 | +| email | 为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 。 | +| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。 | + +## FormItemRule | 键名 | 说明 | 类型 | | --- | --- | --- | diff --git a/docs/component/textarea.md b/docs/component/textarea.md index be485db2..91c93797 100644 --- a/docs/component/textarea.md +++ b/docs/component/textarea.md @@ -161,6 +161,25 @@ const value = ref('') | clearTrigger | 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示 | `InputClearTrigger` | `focus` / `always` | `always` | 1.3.7 | | focusWhenClear | 是否在点击清除按钮时聚焦输入框 | boolean | - | true | 1.3.7 | | ignoreCompositionEvent | 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件。 | boolean | - | true | 1.3.11| +| inputmode | 提供用户在编辑元素或其内容时可能输入的数据类型的提示。 | InputMode | - | text | $LOWEST_VERSION$ | + +### InputMode 可选值 + +>新增于 uni-app 3.6.16+ inputmode是html规范后期更新的内容。各家小程序还未支持此属性。 + +在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性，参见[inputmode](https://uniapp.dcloud.net.cn/component/input.html#inputmode)。 + +| 值 | 说明 | +|---------|----------------------------------------------------------------------------------------------------------------------| +| none | 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 | +| text | 使用用户本地区域设置的标准文本输入键盘。 | +| decimal | 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 | +| numeric | 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 | +| tel | 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 。 | +| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 | +| email | 为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 。 | +| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 。 | + ### FormItemRule 数据结构 diff --git a/src/uni_modules/wot-design-uni/components/wd-input/types.ts b/src/uni_modules/wot-design-uni/components/wd-input/types.ts index aedd5c1b..7fb5749c 100644 --- a/src/uni_modules/wot-design-uni/components/wd-input/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-input/types.ts @@ -10,6 +10,8 @@ export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done' export type InputSize = 'large' +export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' + export const inputProps = { ...baseProps, customInputClass: makeStringProp(''), @@ -182,5 +184,12 @@ export const inputProps = { * 类型: boolean * 默认值: true */ - ignoreCompositionEvent: makeBooleanProp(true) + ignoreCompositionEvent: makeBooleanProp(true), + /** + * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。 + * 类型: InputMode + * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password" + * 默认值: "text" + */ + inputmode: makeStringProp('text') } diff --git a/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue index 31706bf9..6b53c365 100644 --- a/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue +++ b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue @@ -43,6 +43,7 @@ :always-embed="alwaysEmbed" :placeholder-class="inputPlaceholderClass" :ignoreCompositionEvent="ignoreCompositionEvent" + :inputmode="inputmode" @input="handleInput" @focus="handleFocus" @blur="handleBlur" diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts b/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts index c04fee60..67953e0f 100644 --- a/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts @@ -1,7 +1,7 @@ import type { ExtractPropTypes, PropType } from 'vue' import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props' import type { FormItemRule } from '../wd-form/types' -import type { InputClearTrigger } from '../wd-input/types' +import type { InputClearTrigger, InputMode } from '../wd-input/types' export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done' @@ -288,7 +288,14 @@ export const textareaProps = { * 类型: boolean * 默认值: true */ - ignoreCompositionEvent: makeBooleanProp(true) + ignoreCompositionEvent: makeBooleanProp(true), + /** + * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。 + * 类型: InputMode + * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password" + * 默认值: "text" + */ + inputmode: makeStringProp('text') } export type TextareaProps = ExtractPropTypes diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue index 8318e955..8c91a524 100644 --- a/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue +++ b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue @@ -37,6 +37,7 @@ :confirm-hold="confirmHold" :disable-default-padding="disableDefaultPadding" :ignoreCompositionEvent="ignoreCompositionEvent" + :inputmode="inputmode" @input="handleInput" @focus="handleFocus" @blur="handleBlur"