input 输入框

本文介绍输入框组件的使用。

在线体验

属性

属性	类型	描述
value	String	初始内容。
name	String	组件名字，用于表单提交获取数据。
class	String	外部样式名。
style	String	内联样式。
type	String	input 的类型，有效值：text、search。

默认值：text。|
|password|Boolean|是否是密码类型。

默认值：false。|
|maxlength|Number|最大长度。

默认值：140。|
|onInput|EventHandle|键盘输入时触发input事件，event.detail = {value: value}。|
|onConfirm|EventHandle|点击键盘完成（Enter）时触发，event.detail = {value: value}。|
|onFocus|EventHandle|聚焦时触发，event.detail = {value: value}。|
|onBlur|EventHandle|失去焦点时触发，event.detail = {value: value}。|

示例代码

.axml示例代码：

<!--page/component/input/input.axml-->
<view class="page">
  <view class="page-description">输入框</view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">受控聚焦</view>
      <view class="form-row-content">
        <input class="input" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="input something" />
      </view>
    </view>
    <view class="page-section-btns">
      <button size="mini" onTap="bindButtonTap">聚焦</button>
    </view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label"><label for="controlled">显示输入</label></view>
      <view class="form-row-content">
        <input class="input" id="controlled" onInput="bindKeyInput" placeholder="show input content" />
      </view>
    </view>
    <view class="extra-info">你输入的是：{{inputValue}}</view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="form-row-label">最大长度</view>
      <view class="form-row-content">
        <input class="input" maxlength="10" placeholder="maxlength 10" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">收起键盘</view>
      <view class="form-row-content">
        <input class="input" onInput="bindHideKeyboard" placeholder="输入 123 自动收起键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入密码</view>
      <view class="form-row-content">
        <input class="input" password type="text" placeholder="密码输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">输入数字</view>
      <view class="form-row-content">
        <input class="input" type="number" placeholder="数字输入框" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">小数点键盘</view>
      <view class="form-row-content">
        <input class="input" type="digit" placeholder="带小数点的数字键盘" />
      </view>
    </view>
    <view class="form-line" />
    <view class="form-row">
      <view class="form-row-label">身份证键盘</view>
      <view class="form-row-content">
        <input class="input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">搜索框</view>
    <view class="page-section-demo">
      <view class="search-outer">
        <input
          class="search-input"
          placeholder="搜索"
          value="{{search}}"
          onConfirm="doneSearch"
          onInput="handleSearch"
        />
        <text class="search-cancel" onTap="clearSearch">取消</text>
      </view>
    </view>
  </view>
</view>

.js示例代码：

.acss示例代码：

在线体验#

属性#

示例代码#

在线体验

属性

示例代码