admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Input、Textarea在APP-VUE和H5端支持inputmode (#771)

Browse Source 
✅ Closes: #743
This commit is contained in:
不如摸鱼去 2024-12-09 21:11:27 +08:00 committed by GitHub
parent b0a2461a1a
commit 9ceb2e807e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/component/input.md
View File

@ -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 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。 |
| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |
| email | 为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email">。 |
| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url">。 |
## FormItemRule
| 键名 | 说明 | 类型 |
| --- | --- | --- |

19
docs/component/textarea.md
View File

@ -161,6 +161,25 @@ const value = ref<string>('')
| 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 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用 <input type="tel"> 。 |
| search | 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 |
| email | 为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化。表单里面的邮件地址输入应该使用 <input type="email">。 |
| url | 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用 <input type="url">。 |
### FormItemRule 数据结构

11
src/uni_modules/wot-design-uni/components/wd-input/types.ts
View File

@ -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<InputMode>('text')
}

1
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
View File

@ -43,6 +43,7 @@
:always-embed="alwaysEmbed"
:placeholder-class="inputPlaceholderClass"
:ignoreCompositionEvent="ignoreCompositionEvent"
:inputmode="inputmode"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"

11
src/uni_modules/wot-design-uni/components/wd-textarea/types.ts
View File

@ -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<InputMode>('text')
}
export type TextareaProps = ExtractPropTypes<typeof textareaProps>

1
src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
View File

@ -37,6 +37,7 @@
:confirm-hold="confirmHold"
:disable-default-padding="disableDefaultPadding"
:ignoreCompositionEvent="ignoreCompositionEvent"
:inputmode="inputmode"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"