input

输入框。

属性名类型默认值说明
valueString输入框的默认值
typeStringtextinput的类型，详情见后面的说明
passwordBooleanfalse是否为密码输入
placeholderString占位字符
placeholder-styleString占位符的样式
disabeldBooleanfalse是否禁用
maxlengthNumber140最大输入长度
focusBooleanfalse获取焦点
cursor-spacingNumber0指定软键盘弹出时，与光标的距离是多少
cursorNumber-1指定focus时的光标位置
selection-startNumber-1指定focus时选中片段的起始位置
selection-endNumber-1指定focus时选中片段的结束位置
bindinputEventHandler键盘输入时触发，e.detail={value, cursor}；处理函数可以直接return一个字符串，将替换input框的内容。
bindfocusEventHandler输入框聚焦时触发，event.detail={value,height}，height为软键盘高度
bindblurEventHandler输入框失去焦点时触发，event.detail={value}
bindconfirmEventHandler用户点击键盘的完成按钮时触发，event.detail={value}

type的取值范围：

值说明
text文本输入键盘
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘

WARNING

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

示例

  1. <view class="page-cells page-cells_after-title">
  2.     <view class="page-cell page-cell_input">
  3.         <input class="page-input"
  4.             placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  5.     </view>
  6. </view>
  7. <view class="btn-area">
  8.   <button bindtap="bindButtonTap">使得输入框获取焦点</button>
  9. </view>
  11. <view class="page-cells page-cells_after-title">
  12. <view class="page-cell page-cell_input">
  13.     <input class="page-input"
  14.         placeholder="focus详情"
  15.         bindfocus="onfocus" bindconfirm="onconfirm" />
  16. </view>
  17. </view>
  19. <view class="btn-area">{{focusDetail}}</view>
  21. <view class="page-cells page-cells_after-title">
  22. <view class="page-cell page-cell_input">
  23.     <input class="page-input" placeholder="blur测试" bindblur="onblur" />
  24. </view>
  25. </view>
  1. Page({
  2.   data: {
  3.     focus: false,
  4.   },
  5.   bindButtonTap: function (e) {
  6.     this.setData({
  7.       focus: true,
  8.     })
  9.   },
  10.   onfocus: function (e) {
  11.     console.log(e)
  12.     this.setData({focusDetail: JSON.stringify(e.detail)})
  13.   },
  14.   onblur: function (e) {
  15.     tt.showToast({title: 'blur'})
  16.   },
  17.   onconfirm: function (e) {
  18.     tt.showToast({title: 'confirm'})
  19.   }
  20. })

input - 图1

原文: https://developer.toutiao.com/docs/comp/input.html