input

输入框。

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	text	input 的类型，有效值：text, number, idcard, digit, time, date
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	input-placeholder	指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
auto-focus	Boolean	false	自动聚焦，拉起键盘。页面中只能有一个 <input/> 或 <textarea/> 设置 auto-focus 属性
focus	Boolean	false	获取焦点（开发工具暂不支持）
bindinput	EventHandle		除了date/time类型外的输入框，当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = {value: value}
bindblur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}

 

<view class="page">

  <view class="page__hd">

    <text class="page__title">input</text>

    <text class="page__desc">输入框</text>

  </view>

  <view class="page__bd">

    <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中"></input>

    </view>

    <view class="section">

       <input placeholder="连续输入两个1会变成2" bindinput="bindReplaceInput"></input>

    </view>

    <view class="section">

       <input placeholder="输入123自动收起键盘" bindinput="bindHideKeyboard"></input>

    </view>

     <view class="section">

      <input type="number" placeholder="这是一个数字输入框" />

    </view>

    <view class="section">

      <input password type="text" placeholder="这是一个密码输入框" />

    </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>

  </view>

 </view>

 

Page({

    data:{

        focus:false,

        inputValue:''

    },

    bindButtonTap : function (e) {

        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

        }

    },

    bindHideKeyboard : function (e) {

        if(e.detail.value === "123") {

            wx.hideKeyboard() //收起键盘

        }

    }

})