---
name: "input"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "input - 输入框组件，用于键盘交互"
---

## input

> [VERSION] 基础库 >= 2.10.0

### 描述

输入框组件。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `name` | `string` | 否 | - | 在表单中的字段名 |
| `value` | `string` | 否 | `""` | 输入框的初始值 |
| `type` | `string` | 否 | `"text"` | 输入类型，可选值：text 文本输入键盘，number 数字输入键盘，digit 带小数点的数字键盘 |
| `password` | `boolean` | 否 | `false` | 是否为密码输入框 |
| `placeholder` | `string` | 否 | `""` | 输入框为空时显示的占位文字 |
| `placeholder-style` | `string` | 否 | `""` | 占位符样式 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |
| `maxlength` | `number` | 否 | `140` | 最大输入长度，设置为 -1 时不限制 |
| `confirm-type` | `string` | 否 | `""` | 键盘右下角按钮文字类型，可选值：send 发送，search 搜索，next 下一个，go 前往，done 完成 |
| `cursor` | `number` | 否 | - | 指定 focus 时的光标位置 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `input` | `(event: InputInputEvent) => void` | 键盘输入时触发 |
| `confirm` | `(event: InputConfirmEvent) => void` | 点击完成按钮时触发 |
| `focus` | `(event: InputFocusEvent) => void` | 输入框聚焦时触发 |
| `blur` | `(event: InputBlurEvent) => void` | 输入框失去焦点时触发 |

**InputInputEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"input"` | 事件类型 |
| `detail` | `InputInputDetail` | 事件数据 |

**InputConfirmEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"confirm"` | 事件类型 |
| `detail` | `InputValueDetail` | 事件数据 |

**InputFocusEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"focus"` | 事件类型 |
| `detail` | `InputValueDetail` | 事件数据 |

**InputBlurEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"blur"` | 事件类型 |
| `detail` | `InputValueDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<input value="{{inputValue}}" placeholder="请输入内容" bind:input="onInput" />
```

*index.tyss*

```css
input {
  border: 1rpx solid #ccc;
  padding: 16rpx;
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    inputValue: '',
  },
  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },
});
```

#### 不同输入类型

*index.tyml*

```xml
<view>
  <input type="text" placeholder="文本输入" bind:input="onTextInput" />
  <input type="number" placeholder="数字输入" bind:input="onNumberInput" />
  <input type="digit" placeholder="带小数点数字" bind:input="onDigitInput" />
  <input password="{{true}}" placeholder="密码输入" bind:confirm="onConfirm" />
</view>
```

*index.tyss*

```css
input {
  border: 1rpx solid #ddd;
  padding: 16rpx;
  margin: 20rpx;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({
  onTextInput(e) {
    console.log('文本:', e.detail.value);
  },
  onNumberInput(e) {
    console.log('数字:', e.detail.value);
  },
  onDigitInput(e) {
    console.log('小数:', e.detail.value);
  },
  onConfirm(e) {
    console.log('密码确认:', e.detail.value);
  },
});
```

#### 输入限制与禁用

*index.tyml*

```xml
<view>
  <input maxlength="{{10}}" placeholder="最多输入10个字符" placeholder-style="color:#999;font-size:28rpx" />
  <input disabled="{{true}}" value="不可编辑" />
  <input confirm-type="search" placeholder="输入后点搜索" bind:confirm="onSearch" bind:focus="onFocus" bind:blur="onBlur" />
</view>
```

*index.tyss*

```css
input {
  border: 1rpx solid #ddd;
  padding: 16rpx;
  margin: 20rpx;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({
  onSearch(e) {
    console.log('搜索:', e.detail.value);
  },
  onFocus(e) {
    console.log('聚焦:', e.detail.value);
  },
  onBlur(e) {
    console.log('失焦:', e.detail.value);
  },
});
```


### 常见问题

#### 输入框是否支持点击事件，比如 tap、touch？

支持，所有的组件都支持 `tap`、`touch` 事件

#### input 如何用 js 代码清空数据？

通过`setData` 给属性 `value` 设置为空，需要保证`setData`数值有变化。

#### input 内容跳动、延迟如何处理？

可以使用防抖函数。避免 `bind:input`的时候频繁更新。

#### iOS 在输入中文的时候出现丢焦情况，怎么办？

`iOS`的`input`在`bind:Input`中执行`setData`会导致在输入中文的时候丢焦。① 可对`setData`执行防抖操作 ②`bind:Input`的时候将数据存储在`this`下，避免一直 触发`setData`操作。

#### input支持自动聚焦吗？（autofocus）
- 不支持自动聚焦（autofocus），必须用户行为唤起