# Input 输入框

通过键盘输入字符。

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

注意

Input 为受控组件，它总会显示 Vue 绑定值。通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

confirm-type 参数仅仅为type="text"时候生效，uniapp 不支持

# 示例

# 基础用法

<pi-input v-model="name" />

# 禁用状态

通过 disabled 属性指定是否禁用 input 组件。

<pi-input v-model="name" disabled />

# 密码输入框

通过 password 属性可以变成一个隐藏值的密码框

<pi-input v-model="name" password />

# 输入框类型

通过 type 设置输入框的类型，可通过设置type属性切换5种类型，分别为：
textarea ：长文本内容。
text ：普通文本。
number ：数字。
idcard ：身份证号码。
digit ：带小数点的数字键盘。

idcard 仅支持微信、支付宝、百度、QQ小程序；digit 支持微信、支付宝、百度、头条、QQ小程序。

<pi-input v-model="textarea" type="textarea" />
<pi-input v-model="text" type="text" />
<pi-input v-model="number" type="number" />
<pi-input v-model="idcard" type="idcard" />
<pi-input v-model="digit" type="digit" />

1
2
3
4
5

# 输入长度限制

maxlength 和 minlength 是原生属性，用来限制输入框的字符长度，其中字符长度是用 Javascript 的字符串长度统计的。对于类型为 text 或 textarea 的输入框。 -1表示无限制。

<pi-input v-model="text" maxlength="10"  />
<pi-input v-model="textarea" type="textarea" maxlength="30"  />

1
2

# API

# Input Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	-
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
type	输入框类型 'textarea', 'text', 'number', 'idcard', 'digit'	`String`	`false`	-
password	是否是密码类型	`Boolean`	`false`	false
placeholder	-	`String`	`false`	''
disabled	-	`Boolean`	`false`	false
maxlength	-	`Number \| String`	`false`	-1
placeholderStyle	-	`String`	`false`	color: #c0c4cc; font-weight: 400;
confirmType	-	`String`	`false`	done
focus	是否自动获得焦点	`Boolean`	`false`	false
cursorSpacing	指定光标与键盘的距离，单位 px	`Number \| String`	`false`	0
selectionStart	光标起始位置，自动聚焦时有效，需与selection-end搭配使用	`Number \| String`	`false`	-1
selectionEnd	光标结束位置，自动聚焦时有效，需与selection-start搭配使用	`Number \| String`	`false`	-1
showConfirmbar	是否显示键盘上方带有”完成“按钮那一栏	`Boolean`	`false`	true

# Input Events

事件名	描述	参数
input	输入内容	-
focus	获得焦点	-
blur	失去焦点	-
confirm	输入完成事件	-

← Table 表格 Radio 单选框 →