---
name: "input"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "input - Input box component for keyboard interaction"
---

## input

> [VERSION] Base Library >= 2.10.0

### Description

Input component

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `name` | `string` | No | - | Field name in the form |
| `value` | `string` | No | `""` | Initial value of the input |
| `type` | `string` | No | `"text"` | Input type. Options: text (text keyboard), number (numeric keyboard), digit (numeric keyboard with a decimal point) |
| `password` | `boolean` | No | `false` | Whether it is a password field |
| `placeholder` | `string` | No | `""` | Placeholder text shown when the input is empty |
| `placeholder-style` | `string` | No | `""` | Placeholder style |
| `disabled` | `boolean` | No | `false` | Whether disabled |
| `maxlength` | `number` | No | `140` | Maximum input length; set to -1 for no limit |
| `confirm-type` | `string` | No | `""` | Label type of the keyboard’s bottom-right button. Options: send, search, next, go, done |
| `cursor` | `number` | No | - | Specify the cursor position on focus |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `input` | `(event: InputInputEvent) => void` | Triggered on keyboard input |
| `confirm` | `(event: InputConfirmEvent) => void` | Triggered when the Done button is tapped |
| `focus` | `(event: InputFocusEvent) => void` | Triggered when the input is focused |
| `blur` | `(event: InputBlurEvent) => void` | Fires when the input loses focus |

**InputInputEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"input"` | Event type |
| `detail` | `InputInputDetail` | Event data |

**InputConfirmEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"confirm"` | Event type |
| `detail` | `InputValueDetail` | Event data |

**InputFocusEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"focus"` | Event type |
| `detail` | `InputValueDetail` | Event data |

**InputBlurEvent**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"blur"` | Event type |
| `detail` | `InputValueDetail` | Event data |

### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<input value=\"{{inputValue}}\" placeholder=\"Please enter content\" 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 });
  },
});
```

#### Different input types

*index.tyml*

```xml
// index.tyml
<view>
  <input type=\"text\" placeholder=\"Text input\" bind:input=\"onTextInput\" />
  <input type=\"number\" placeholder=\"Number input\" bind:input=\"onNumberInput\" />
  <input type=\"digit\" placeholder=\"Number with decimal point\" bind:input=\"onDigitInput\" />
  <input password=\"{{true}}\" placeholder=\"Password input\" 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('Text:', e.detail.value);
  },
  onNumberInput(e) {
    console.log('Number:', e.detail.value);
  },
  onDigitInput(e) {
    console.log('Decimal:', e.detail.value);
  },
  onConfirm(e) {
    console.log('Password confirmed:', e.detail.value);
  },
});
```

#### Input constraints and disabled state

*index.tyml*

```xml
// index.tyml
<view>
  <input maxlength=\"{{10}}\" placeholder=\"Up to 10 characters\" placeholder-style=\"color:#999;font-size:28rpx\" />
  <input disabled=\"{{true}}\" value=\"Not editable\" />
  <input confirm-type=\"search\" placeholder=\"Tap Search after entering\" 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('Search:', e.detail.value);
  },
  onFocus(e) {
    console.log('Focus:', e.detail.value);
  },
  onBlur(e) {
    console.log('Blur:', e.detail.value);
  },
});
```


### FAQ

#### Does the input box support tap and touch events?

Yes, all components support `tap` and `touch` events.

#### How can I use JavaScript to clear input data?

Use `setData` to set the `value` property to empty. Make sure the value passed to `setData` has actually changed.

#### How to deal with jumpy content or input latency?

You can use a debounce function to avoid frequent updates during `bind:input`.

#### How to handle focus loss when entering Chinese characters on iOS?

When the `input` on iOS executes `setData` in `bind:Input`, it can cause focus loss during Chinese input. ① You can debounce the `setData` call. ② Store data in `this` during `bind:Input` to avoid continuously triggering `setData`.

#### Does input support auto focus? (autofocus)

- Auto focus (autofocus) is not supported. Focus must be triggered by user interaction.