微信小程序学习之路——表单组件（二）

input

<input/>是单行输入框，用于收集用户信息，其属性如下：

属性名	类型	默认值	说明	最低版本
value	String		输入框的初始内容
type	String	"text"	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number / String	0	指定光标与键盘的距离，单位px（2.4.0起支持rpx）。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	Boolean	false	获取焦点
confirm-type	String	"done"	设置键盘右下角按钮的文字，仅在type='text'时生效	1.1.0
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起	1.1.0
cursor	Number		指定focus时的光标位置	1.5.0
selection-start	Number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用	1.9.0
selection-end	Number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用	1.9.0
adjust-position	Boolean	true	键盘弹起时，是否自动上推页面	1.9.90
bindinput	EventHandle		键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
bindconfirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}
aria-label	String		无障碍访问，（属性）元素的额外描述	2.5.0

confirm-type 有效值：

值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

属性篇幅较长，示例代码如下:

<view class="section">
  <input placeholder='默认样式，自动聚焦 ' auto-focus/>
</view>
<view class='section'>
  <input placeholder='内容中的123会被替换为0'bindinput="changeValue" type='number'maxlength="20"/>
</view>
<view class='section'>
<input placeholder='输入3个以上字符会收起键盘'bindinput="hideKeyboard" type='number'/>
</view>

.section{font-size: 12px;padding: 10px 5px;border-bottom: dashed 1px #cecece;}
.section input{border: solid 1px #ccc;padding: 0 5px;background-color: #fff;border-radius: 4px;height: 30px;}

Page({
  changeValue:function(e){
    console.log(e.detail);
    var value = e.detail.value,
    pos =e.detail.cursor,
    left;
    //计算光标的位置
    if(pos!=-1){
//光标在中间位置
  left=value.slice(0,pos);
  //修改后光标位置也要随之改变
  pos = left.replace(/123/g,'0').length;
    }
    return{
      value:e.detail.value.replace(/123/g,'0'),
      cursor:pos
    }
  },
  hideKeyboard:function(e){
    //调用关闭键盘API
    wx.hideKeyboard();
  }
})

执行结果如下:

textarea组件