文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

input

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

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


一、简介


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


1.淘宝 App 支持版本


iOS：10.3.10及以上版本。

Android：10.3.16及以上版本。


2.小部件构建支持版本


需要 小部件 2.0。


二、使用示例

1.效果示例


25.png


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) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号