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() //收起键盘
        }
    }
})
 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注