input

Represents an input box.

Since: 1.0.0

Properties

Name	Type	Default Value	Mandatory	Description
value	string	-	No	Initial content of the input box.
focus	boolean	false	No	Whether the input box has the focus.
type	string	text	No	Input type. Valid values: text: text input. number: number input.
confirm-type	string	done	No	Text displayed on the bottom-right button of the keyboard. This property takes effect only when type is set to text. Valid values: send: The text on the bottom-right button of the keyboard is Send. search: The text on the bottom-right button of the keyboard is Search. next: The text on the bottom-right button of the keyboard is Next. go: The text on the bottom-right button of the keyboard is Go. done: The text on the bottom-right button of the keyboard is Done.
password	boolean	false	No	Whether it is a password.
placeholder	string	-	No	Placeholder when the input box is empty.
placeholder-style	string	-	No	Placeholder style. Since: 1.0.9
disabled	boolean	false	No	Disabled or not.
maxlength	number	140	No	Maximum input length (-1: no limitation on length).
bindinput	eventhandle	-	No	Event handler triggered upon keyboard input, with event.detail = {value}.
bindfocus	eventhandle	-	No	Event handler triggered when the input box gains focus.
bindblur	eventhandle	-	No	Event handler triggered when the input box loses focus.
bindconfirm	eventhandle	-	No	Event handler triggered when the confirm button is pressed.
placeholder-class	string	input-placeholder	No	Placeholder style class. Since: 1.0.9

Example

HXML file:

<view class="page-section">
    <view class="ascf-cells__title">bindinput obtains the input value in real time: {{inputValue}}</view>
    <view class="ascf-cells ascf-cells_after-title">
      <view class="ascf-cell ascf-cell_input">
        <input class="ascf-input"  bindinput="bindKeyInput" placeholder="Synchronize the input to the view"/>
      </view>
    </view>
</view>

JS file:

Page({
  data: {
    inputValue: "",
  },
  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value,
    });
  },
});

目录

input

Properties

Example