宇直豪
宇直豪

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

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 右下角按钮为“完成”

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


  


  




.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();
  }
})

执行结果如下:

微信小程序学习之路——表单组件（二）_第1张图片

textarea组件