微信小程序----组件之input

效果图

项目结构：

核心代码：

index.wxml

<view class="section">  <input placeholder="这是一个可以自动聚焦的input" auto-focus/></view><view class="section">  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />  <view class="btn-area">    <button bindtap="bindButtonTap">使得输入框获取焦点</button>  </view></view><view class="section">  <input  maxlength="10" placeholder="最大输入长度10" /></view><view class="section">  <view class="section__title">你输入的是：{{inputValue}}</view>  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/></view><view class="section">  <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" /></view><view class="section">  <input password type="number" /></view><view class="section">  <input password type="text" /></view><view class="section">  <input type="digit" placeholder="带小数点的数字键盘"/></view><view class="section">  <input type="idcard" placeholder="身份证输入键盘" /></view><view class="section">  <input placeholder-style="color:red" placeholder="占位符字体是红色的" /></view>

index.is

//input.jsPage({  data: {    focus: false,    inputValue: ''  },  bindButtonTap: function () {    this.setData({      focus: true    })  },  bindKeyInput: function (e) {    this.setData({      inputValue: e.detail.value    })  },  bindReplaceInput: function (e) {    var value = e.detail.value    var pos = e.detail.cursor    if (pos != -1) {      //光标在中间      var left = e.detail.value.slice(0, pos)      //计算光标的位置      pos = left.replace(/11/g, '2').length    }    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置    return {      value: value.replace(/11/g, '2'),      cursor: pos    }    //或者直接返回字符串,光标在最后边    //return value.replace(/11/g,'2'),  }})

源码下载：http://download.csdn.net/download/zhaihaohao1/9968483