字节跳动小程序开发组件文档 input

由 卓别林 创建, 最后一次修改 2019-08-09

输入框。

属性名 类型 默认值 说明 最低版本
value String 输入框的初始值,也可以通过setData修改 1.0.0
type String text input的类型,详情见后面的说明 1.0.0
password Boolean false 是否为密码输入 1.0.0
placeholder String 占位字符 1.0.0
placeholder-style String 占位符的样式 1.0.0
disabled Boolean false 是否禁用 1.0.0
maxlength Number 140 最大输入长度 1.0.0
focus Boolean false 获取焦点 1.0.0
cursor-spacing Number 0 指定软键盘弹出时,与光标的距离是多少,单位是px 1.0.0
cursor Number -1 指定focus时的光标位置 1.0.0
selection-start Number -1 指定focus时选中片段的起始位置 1.0.0
selection-end Number -1 指定focus时选中片段的结束位置 1.0.0
bindinput EventHandler 键盘输入时触发,e.detail={value, cursor};处理函数可以直接return一个字符串,将替换input框的内容。 1.0.0
bindfocus EventHandler 输入框聚焦时触发,event.detail={value,height},height为软键盘高度 1.0.0
bindblur EventHandler 输入框失去焦点时触发,event.detail={value} 1.0.0
bindconfirm EventHandler 用户点击键盘的完成按钮时触发,event.detail={value} 1.0.0

type的取值范围:

说明
text 文本输入键盘
number 数字输入键盘
digit 带小数点的数字键盘

WARNING

避免过于频繁地在bindinput回调里执行setData({value: ...}),如果想在键盘输入时改变input框的值,可以直接在bindinput回调里return一个字符串

示例


开发者工具中预览

<view class="page-cells page-cells_after-title">
    <view class="page-cell page-cell_input">
        <input class="page-input"
            placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
    </view>
</view>
<view class="btn-area">
  <button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>

<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
    <input class="page-input"
        placeholder="focus详情"
        bindfocus="onfocus" bindconfirm="onconfirm" />
</view>
</view>

<view class="btn-area">{{focusDetail}}</view>

<view class="page-cells page-cells_after-title">
<view class="page-cell page-cell_input">
    <input class="page-input" placeholder="blur测试" bindblur="onblur" />
</view>
</view>
Page({
  data: {
    focus: false,
  },
  bindButtonTap: function (e) {
    this.setData({
      focus: true,
    })
  },
  onfocus: function (e) {
    console.log(e)
    this.setData({focusDetail: JSON.stringify(e.detail)})
  },
  onblur: function (e) {
    tt.showToast({title: 'blur'})
  },
  onconfirm: function (e) {
    tt.showToast({title: 'confirm'})
  }
})


以上内容是否对您有帮助:
二维码
建议反馈
二维码