---
title: Input 输入框
description: 用于单行文本信息输入。
spline: form
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-92%25-blue" /></span>
## 引入
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-input": "tdesign-miniprogram/input/input"
}
```
## 代码演示
### 01 组件类型
基础输入框
{{ base }}
带字数限制输入框
{{ maxlength }}
带操作输入框
{{ suffix }}
带图标输入框
{{ prefix }}
特定类型输入框
{{ special }}
### 02 组件状态
输入框状态
{{ status }}
信息超长状态
{{ label }}
### 03 组件样式
内容位置
{{ align }}
竖排样式
{{ layout }}
非通栏样式
{{ banner }}
标签外置样式
{{ bordered }}
自定义样式文本框
{{ custom }}
## API
### Input Props
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | left | 文本内容位置,居左/居中/居右。可选项:left/center/right | N
layout | String | horizontal | 标题输入框布局方式。可选项:vertical/horizontal | N
borderless | Boolean | false | 是否开启无边框模式 | N
clearable | Boolean / Object | false | 是否可清空,默认不启动。值为 `true` 表示使用默认清除空按钮,值为 `Object` 表示透传至 `icon` | N
disabled | Boolean | false | 是否禁用输入框 | N
error-message | String | - | 已废弃。错误提示文本,值为空不显示(废弃属性,如果需要,请更为使用 status 和 tips) | N
external-classes | Array | - | 组件类名,用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class','t-class-prefix-icon', 't-class-label', 't-class-input', 't-class-clearable', 't-class-suffix', 't-class-suffix-icon', 't-class-tips']` | N
format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型:`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
label | String / Slot | - | 左侧文本。 | N
maxcharacter | Number | - | 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
maxlength | Number | -1 | 用户最多可以输入的文本长度,一个中文等于一个计数长度。默认为 -1,不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N
placeholder | String | undefined | 占位符 | N
prefix-icon | String / Object / Slot | - | 组件前置图标。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
readonly | Boolean | false | 【开发中】只读状态 | N
size | String | medium | 【已废弃】输入框尺寸。可选项:small/medium。TS 类型:`'medium' \| 'small'` | N
status | String | - | 输入框状态。可选项:success/warning/error | N
suffix | String / Slot | - | 后置图标前的后置内容 | N
suffix-icon | String / Object / Slot | - | 后置文本内容。值为字符串表示图标名称,值为 `Object` 类型,表示透传至 `icon`。 | N
tips | String / Slot | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式 | N
type | String | text | 输入框类型。可选项:text/number/idcard/digit/safe-password/password/nickname | N
value | String / Number | - | 输入框的值。TS 类型:`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型:`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N
password | Boolean | false | 是否是密码类型(已废弃,请更为使用 type 指定输入框类型) | N
placeholder-style | String | - | 必需。指定 placeholder 的样式 | Y
placeholder-class | String | input-placeholder | 指定 placeholder 的样式类 | N
cursor-spacing | Number | 0 | 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | N
auto-focus | Boolean | false | (即将废弃,请直接使用 focus )自动聚焦,拉起键盘 | N
focus | Boolean | false | 获取焦点 | N
confirm-type | String | done | 设置键盘右下角按钮的文字,仅在type='text'时生效。<br />具体释义:<br />`send` 右下角按钮为“发送”;<br />`search` 右下角按钮为“搜索”;<br />`next` 右下角按钮为“下一个”;<br />`go` 右下角按钮为“前往”;<br />`done` 右下角按钮为“完成”。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)。可选项:send/search/next/go/done | N
always-embed | Boolean | false | 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | N
confirm-hold | Boolean | false | 点击键盘右下角按钮时是否保持键盘不收起 | N
cursor | Number | - | 必需。指定 focus 时的光标位置 | Y
selection-start | Number | -1 | 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | N
selection-end | Number | -1 | 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | N
adjust-position | Boolean | true | 键盘弹起时,是否自动上推页面 | N
hold-keyboard | Boolean | false | focus时,点击页面的时候不收起键盘 | N
safe-password-cert-path | String | - | 安全键盘加密公钥的路径,只支持包内路径 | N
safe-password-length | Number | - | 安全键盘输入密码长度 | N
safe-password-time-stamp | Number | - | 安全键盘加密时间戳 | N
safe-password-nonce | String | - | 安全键盘加密盐值 | N
safe-password-salt | String | - | 安全键盘计算 hash 盐值,若指定custom-hash 则无效 | N
safe-password-custom-hash | String | - | 安全键盘计算 hash 的算法表达式,如 `md5(sha1('foo' + sha256(sm3(password + 'bar'))))` | N
### Input Events
名称 | 参数 | 描述
-- | -- | --
blur | `(value: InputValue)` | 失去焦点时触发
change | `(value: InputValue, cursor: number, keyCode: number)` | 输入框值发生变化时触发;cursor 为光标位置;
clear | \- | 清空按钮点击时触发
enter | `(value: InputValue)` | 回车键按下时触发
focus | `(value: InputValue)` | 获得焦点时触发
keyboardheightchange | `(height: number, duration: number)` | 键盘高度发生变化的时候触发此事件
nicknamereview | `(pass: boolean, timeout: boolean)`| 用户昵称审核完毕后触发,仅在 type 为 "nickname" 时有效
click `v0.32.0`| `(trigger: InputTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts)。<br/>`type InputTrigger = 'suffix' \| 'suffix-icon';`<br/>
没有合适的资源?快使用搜索试试~ 我知道了~
一套基于TDesign的微信电商小程序模板
共1303个文件
js:400个
ts:257个
wxss:165个
需积分: 0 1 下载量 66 浏览量
2024-02-13
22:15:29
上传
评论
收藏 886KB RAR 举报
温馨提示
这是一套基于TDesign的微信电商小程序模板。包括首页、分类、购物车、个人中心、订单、评论、收货地址等,功能很全。
资源推荐
资源详情
资源评论
收起资源包目录
一套基于TDesign的微信电商小程序模板 (1303个子文件)
commit-msg 91B
.DS_Store 10KB
.DS_Store 8KB
.DS_Store 8KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.gitignore 241B
.gitignore 1B
index.js 445KB
good.js 47KB
api.js 41KB
orderDetail.js 34KB
orderList.js 34KB
index.js 16KB
date-time-picker.js 15KB
index.js 14KB
index.js 12KB
comments.js 12KB
slider.js 12KB
index.js 11KB
cart.js 11KB
tabs.js 11KB
upload.js 10KB
index.js 9KB
indexes.js 9KB
index.js 9KB
index.js 9KB
cascader.js 9KB
index.js 8KB
index.js 8KB
applyService.js 7KB
notice-bar.js 7KB
pull-down-refresh.js 7KB
utils.js 7KB
index.js 7KB
checkbox-group.js 6KB
index.js 6KB
message.js 6KB
category.js 6KB
index.js 6KB
calendar.js 6KB
dialog.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
dropdown-item.js 6KB
index.js 6KB
image-viewer.js 6KB
index.js 5KB
index.js 5KB
picker-item.js 5KB
index.js 5KB
instantiationDecorator.js 5KB
sticky.js 5KB
index.js 5KB
index.js 5KB
index.js 5KB
rate.js 5KB
index.js 5KB
grid-item.js 5KB
tab-bar-item.js 5KB
navbar.js 5KB
index.js 5KB
input.js 4KB
radio-group.js 4KB
skeleton.js 4KB
index.js 4KB
action-sheet.js 4KB
transition.js 4KB
picker.js 4KB
selectCoupons.js 4KB
image.js 4KB
textarea.js 4KB
tree-select.js 4KB
radio.js 4KB
.eslintrc.js 4KB
swiper.js 4KB
collapse-panel.js 4KB
count-down.js 4KB
orderConfirm.js 4KB
pay.js 4KB
index.js 4KB
button.js 4KB
toast.js 4KB
stepper.js 4KB
progress.js 3KB
dropdown-menu.js 3KB
checkbox.js 3KB
tag.js 3KB
util.js 3KB
index.js 3KB
avatar-group.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
link.js 3KB
index.js 3KB
共 1303 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
嘿哈吼哈是谁
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功