Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
76213615
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
76213615
编写于
1月 11, 2023
作者:
DCloud_Heavensoft
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update input.md
上级
d816ee63
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
20 addition
and
9 deletion
+20
-9
docs/component/input.md
docs/component/input.md
+20
-9
未找到文件。
docs/component/input.md
浏览文件 @
76213615
## input
输入框。
单行输入框。
html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:
[
radio组件
](
https://uniapp.dcloud.io/component/radio
)
、
[
checkbox组件
](
https://uniapp.dcloud.io/component/checkbox
)
、
[
时间选择
](
https://uniapp.dcloud.io/component/picker?id=%e6%97%b6%e9%97%b4%e9%80%89%e6%8b%a9%e5%99%a8
)
、
[
日期选择
](
https://uniapp.dcloud.io/component/picker?id=%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8
)
、
[
图片选择
](
https://uniapp.dcloud.io/api/media/image?id=chooseimage
)
、
[
视频选择
](
https://uniapp.dcloud.io/api/media/video?id=choosevideo
)
、
[
多媒体文件选择(含图片视频)
](
https://uniapp.dcloud.io/api/media/video?id=choosemedia
)
、
[
通用文件选择
](
https://uniapp.dcloud.io/api/media/file?id=choosefile
)
。
### 属性说明
...
...
@@ -73,7 +75,6 @@
**注意事项**
-
原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在uni-app和小程序规范中,input仅仅是输入框。其他功能uni-app有单独的组件或API:
[
radio组件
](
https://uniapp.dcloud.io/component/radio
)
、
[
checkbox组件
](
https://uniapp.dcloud.io/component/checkbox
)
、
[
时间选择
](
https://uniapp.dcloud.io/component/picker?id=%e6%97%b6%e9%97%b4%e9%80%89%e6%8b%a9%e5%99%a8
)
、
[
日期选择
](
https://uniapp.dcloud.io/component/picker?id=%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8
)
、
[
图片选择
](
https://uniapp.dcloud.io/api/media/image?id=chooseimage
)
、
[
视频选择
](
https://uniapp.dcloud.io/api/media/video?id=choosevideo
)
、
[
多媒体文件选择(含图片视频)
](
https://uniapp.dcloud.io/api/media/video?id=choosemedia
)
、
[
通用文件选择
](
https://uniapp.dcloud.io/api/media/file?id=choosefile
)
。
-
小程序平台,
`number`
类型只支持输入整型数字。微信开发者工具上体现不出效果,请使用真机预览。
-
如果需要在小程序平台输入浮点型数字,请使用
`digit`
类型。
-
小程序端input在置焦时,会表现为原生控件,此时会层级变高。如需前端组件遮盖input,需让input失焦,或使用cover-view等覆盖原生控件的方案,
[
参考
](
https://uniapp.dcloud.io/component/native-component
)
。具体来讲,阿里小程序的input为text且置焦为原生控件;微信、头条、QQ所有input置焦均为原生控件;百度小程序置焦时仍然是非原生的。也可以参考
[
原生控件
](
https://uniapp.dcloud.io/component/native-component
)
文档
...
...
@@ -82,12 +83,16 @@
#### text-content-type 有效值 @text-content-type
> 仅 App-nvue-iOS 支持
|值|说明|
|:-|:-|
|oneTimeCode|一次性验证码|
|oneTimeCode|一次性验证码
,常用于短信验证码输入
|
#### confirm-type 有效值 @confirm-type
弹出软键盘的右下角按钮的文字。
|值|说明|平台差异说明|
|:-|:-|:-|
|send|右下角按钮为“发送”|微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
...
...
@@ -96,11 +101,16 @@
|go|右下角按钮为“前往”||
|done|右下角按钮为“完成”|微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+,且要求设备webview内核Chrome81+、Safari13.7+)|
-
App平台的nvue页面,如果是weex编译模式,需通过weex的api设置(weex模式已被淘汰)
-
App平台的vue页面及 H5平台 的弹出键盘使用的是浏览器控制的键盘,在Chrome81+、Safari13.7+之前,键盘右下角文字只能设置完成和搜索,从Chrome81+、Safari13.7+起支持设置发送、下一个。
-
App平台涉及聊天的建议使用nvue,一方面因为app-vue控制键盘右下角按键文字为“发送”对webview内核有要求,另一方面聊天记录如使用scroll-view,过长的内容在app-vue上会有性能问题。
#### inputmode 有效值 @inputmode
> 新增于 uni-app 3.6.16+
inputmode是html规范后期更新的内容。各家小程序还未支持此属性。
在符合条件的高版本webview里,uni-app的web和app-vue平台中可使用本属性。
|值|说明|
|:-|:-|
|none|无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。|
...
...
@@ -114,18 +124,19 @@
**注意事项**
-
inputmode 兼容性:
`Chrome >= 66`
、
`Edge >= 79`
、
`Firefox >= 95`
、
`Chrome Android >= 66`
、
`Firefox for Android >= 79`
、
`Safari on iOS >= 12.2`
、
`WebView Android >= 66`
-
input
mode 和
`type`
、
`comfirm-tye`
属性的区别
:
-
input
组件有
`inputmode`
和
`type`
、
`comfirm-tye`
3个相似的属性,它们的区别详解如下
:
-
type:在 uni-app 和小程序中仅仅是输入框,定义 input 的工作方式,此值决定可输入什么值。比如 number 只能输入数字。
-
comfirm-type:定义键盘右下角
返回键的类型
-
comfirm-type:定义键盘右下角
按键的文字
-
inputmode:inputmode 属性是当使用某些值时会对键盘所作出的优化。
-
同时使用 inputmode 和 comfirm-type 时,
如果有返回键,则该
键类型由 comfirm-type 决定
-
同时使用 inputmode 和 comfirm-type 时,
若设值冲突,键盘右下角按
键类型由 comfirm-type 决定
-
type 属性和 inputmode 属性并不冲突
### App平台iOS端软键盘上方横条去除方案
App平台在iOS上,webview中的软键盘弹出时,默认在软键盘上方有一个横条,显示着:上一项、下一项和完成等按钮。如不想显示这个横条,可以配置softinputNavBar: 'none'
app-vue在iOS上,webview中的软键盘弹出时,默认在软键盘上方有一个横条,显示着:上一项、下一项和完成等按钮。
如不想显示这个横条,可以配置softinputNavBar: 'none'
配置方式,在 pages.json 中配置 style
配置方式,在 pages.json 中
某个页面或全局
配置 style
```
json
"app-plus"
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录