文档中心 > 小部件

input

更新时间：2022/12/08 访问次数：5350

一、简介
二、使用示例
三、属性及事件
四、FAQ

说明：本文档适用于小部件3.0。

一、简介

小部件输入框，支持文本、数字、密码、日期选择等多种类型的输入，可通过CSS样式设置输入框字体及颜色，同时支持最大输入长度、自动聚焦、事件回调等功能。

1.淘宝 App 支持版本

iOS：10.3.10及以上版本。

Android：10.3.16及以上版本。

2.小部件构建支持版本

需要小部件 2.0。

二、使用示例

1.效果示例

2.示例代码

.xml

<view class="page">
  <view class="page-section">
    <view class="form-row">
      <view class="label">受控聚焦</view>
      <input class="inputA"
        type="text"
        autofocus="{{ autofocus }}"
        placeholder="我是占位符"
        return-key-type="done"
        onBlur="onBlur">
      </input>
    </view>
    <view class="page-section-btns" onTap="focusBtnTap">聚焦</view>
  </view>
  <view class="page-section">
    <view class="form-row">
      <view class="label">显示输入</view>
        <input class="inputB"
          placeholder="请输入内容"
          return-key-type="done"
          onInput="onInput"
          onReturn="onReturn">
        </input>
    </view>
    <text class="input-desc">输入的内容为：{{ inputValue }}</text>
  </view>
<!-- value="{{ value }}" -->
  <view class="page-section">
    <view class="form-row">
      <view class="label">长度限制</view>
        <input class="inputB"
          type="text"
          maxlength="{{ maxlength }}"
          placeholder="最大长度为{{ maxlength }}">
        </input>
    </view>
    <view class="form-row">
      <view class="label">输入密码</view>
        <input class="inputB"
          type="password"
          placeholder="密码输入框">
        </input>
    </view>
    <view class="form-row">
      <view class="label">输入数字</view>
        <input class="inputB"
          type="number"
          placeholder="数字输入框">
        </input>
    </view>
  </view>
  
  <view class="page-section">
    <view class="form-row">
      <view class="label">日期输入</view>
        <input class="inputB"
          type="date"
          placeholder="格式yyyy-mm-dd">
        </input>
    </view>
    <view class="form-row">
      <view class="label">时间输入</view>
        <input class="inputB"
          type="time"
          placeholder="格式hh:mm">
        </input>
    </view>
  </view>
</view>

.js

Component({
  data: {
    maxlength: 10,
    inputValue: "",
    autofocus: false,
  },
  onInit() {
  },
  didMount() {
  },
  methods: {
    onInput(event) {
      this.setData({
        inputValue: event.value
      });
    },
    onChange(event) {
      my.alert({ content: "onChange:"+JSON.stringify(event) });
    },
    onBlur(event) {
      this.setData({
        autofocus: false,
      });
    },
    onReturn(event) {
      my.alert({ content: "onReturn:"+JSON.stringify(event) });
    },
    onFocus(event) {
      my.alert({ content: "onFocus:"+JSON.stringify(event) });
    },
    focusBtnTap() {
      this.setData({
        autofocus: true,
      });
    }
  }
})

.acss

.page {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #0088fb;
}
.inputA {
  width: 400rpx;
  height: 60rpx;
  font-size: 48rpx;
  color: rgb(255, 00, 00);
}
.inputB {
  width: 400rpx;
  height: 60rpx;
  margin-left: 10rpx;
  font-size: 32rpx;
  color: rgb(51, 51, 51);
}
.page-section-btns {
  width: 100rpx;
  height: 50rpx;
  margin-left: 20rpx;
  background-color: #f35d0d;
}
.page-section {
  background-color: #ffffff;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
}
.form-row {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0 20rpx;
  height: 80rpx;
}
.input-desc {
  margin-left: 20rpx;
}

三、属性及事件

1.组件属性

属性	类型	描述	是否支持	将要支持
value	String	初始内容。	是	/
type	String	input 的类型, 有效值：text，date，datetime，email， password，tel，time，url，number 默认值： text。 ("input.type.numberpad") 来检测。注意：当启用数字键盘时，Android 客户端会影响 position:fixed 并指定 bottom 属性的元素。	是	/
placeholder	String	占位符。	是	/
disabled	Boolean	是否禁用。默认值： false。	是	/
maxlength	Number	最大长度。默认值： 140。	是	/
focus	Boolean	获取焦点。默认值： false。	是	/
onInput	EventHandle	键盘输入时触发 input 事件，event.detail = {value: value,cursor: cursor}	否	是
onConfirm	EventHandle	点击键盘完成时触发，event.detail = {value: value}	否	是
onBlur	EventHandle	失去焦点时触发（仅支持真机），event.detail = {value: value}。	否	是
password	Boolean	是否是密码类型。默认值： false。	否	/
name	String	组件名字，用于表单提交获取数据。	否	否
placeholder-style	String	指定 placeholder 的样式，可设置间距。	否	否
placeholder-class	String	指定 placeholder 的样式类。	否	否
confirm-type	String	设置键盘右下角按钮的文字，有效值：done（显示“完成”）、go（显示“前往”）、next（显示“下一个”）、search（显示“搜索”）、send（显示“发送”），平台不同显示的文字略有差异。注意：只有在 type=text 时有效。默认值： done。	否	否
confirm-hold	Boolean	点击键盘右下角按钮时是否保持键盘不收起状态。默认值： false。	否	否
cursor	Number	指定 focus 时的光标位置。	否	否
selection-start	Number	获取光标时，选中文本对应的焦点光标起始位置，需要和 selection-end 配合使用。默认值： -1。	否	否
selection-end	Number	获取光标时，选中文本对应的焦点光标结束位置，需要和 selection-start 配合使用。默认值： -1。	否	否
random-number	Boolean	当 type 为 number, digit, idcard 数字键盘是否随机排列。默认值： false。	否	否
controlled	Boolean	是否为受控组件。为 true 时，value 内容会完全受 setData 控制。建议当 type 值为 text 时不要将 controlled 设置为 true，详见 Bugs & Tips。默认值： false。	否	否
always-system	Boolean	是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效。默认值：false。	否	否
onFocus	EventHandle	聚焦时触发，event.detail = {value: value}。	否	否

2.CSS样式

名称

类型

必填

默认值

最低支持版本

描述

color

String

非必填

系统默认

iOS: 10.3.10

Android:10.3.16

输入框文本颜色，仅支持rgb(255, 255, 255)格式

暂不支持rgba、#ARGB、#RGB

e.g. color: rgb(51, 51, 51);

font-size

String

非必填

系统默认

iOS: 10.3.10

Android:10.3.16

输入框字体Size，单位rpx，实际字号会转化为对应屏幕下的pt值

例如：36rpx在320屏幕上为round(36*(320/750)) = 15.0pt

e.g. font-size: 36rpx;

3.组件事件

名称	最低支持版本	描述
onInput	iOS: 10.3.10 Android:10.3.16	输入事件，输入状态时会不断触发；value : "当前输入框文本"
onChange	iOS: 10.3.10 Android:10.3.16	输入完成事件，当用户完成输入时触发；value : "当前输入框文本"
onBlur	iOS: 10.3.10 Android:10.3.16	失去焦点，当输入框失去焦点时触发
onReturn	iOS: 10.3.10 Android:10.3.16	右下角"回车"点击； value : "当前文本"，returnKeyType : "default" \| "go" \| "next" \| "search" \| "send" \| "done"
onFocus	iOS: 10.3.10 Android:10.3.16	获得焦点，当输入框获得焦点时触发

四、FAQ

1、如何监听输入文案的变化？

可以试用onInput事件，在输入内容时，onInput事件会不断触发。

FAQ

关于此文档暂时还没有FAQ

有用(0) 我要提问

淘宝开放平台

小部件