开发文档

input

输入框。该组件是原生组件，使用时请注意相关限制。

type 的合法值

confirm-type有效值

Tips：

• native 为false时，部分键盘增强属性和事件将失效
• native 为ture时，input 是一个原生组件，字体是系统字体，所以无法设置 font-family
• 不建议输入时对用户输入进行修改
• confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持

示例代码：

<!--pages/component/pages/input/input.mcml-->
<view class="container">
  <view class="statement">输入框。</view>
  <view class="cssname">type</view>
  <view mc:for="{{types}}" class="inputClass">
    <input style="height:100%;" type="{{item.type}}" placeholder="{{item.desc}}"></input>
  </view>
  <view class="cssname">confirm-type</view>
  <view mc:for="{{confrimTypes}}" class="inputClass">
    <input confirm-type="{{item.type}}" style="height:100%;" password="{{item.password || false}}" type="text" placeholder="{{item.desc}}"></input>
  </view>
  <view class="cssname">password: true, placeholder-style: placeholder 的样式</view>
  <view class="inputClass">
    <input style="height:100%;" password="true" placeholder="密码输入框" placeholder-style="color:red;"></input>
  </view>
  <view class="cssname">disabled: true</view>
  <view class="inputClass">
    <input style="height:100%;" disabled="true" value="禁用的输入框"></input>
  </view>
  <view class="cssname">maxlength: 3, placeholder-class:placeholder 的样式类</view>
  <view class="inputClass">
    <input style="height:100%;" maxlength="3" placeholder-class="placeholderClass" placeholder="最大长度3个字符"></input>
  </view>
  <view class="cssname">focus: true, cursor : 3</view>
  <view class="inputClass">
    <input style="height:100%;" auto-focus="true" cursor="3" focus="true" value="自动焦点" placeholder=""></input>
  </view>
  <view class="cssname">confirm-hold: true</view>
  <view class="inputClass">
    <input style="height:100%;" confirm-hold="true" placeholder="点击键盘右下角按钮时保持键盘不收起"></input>
  </view>
  <view class="cssname">adjust-position: false</view>
  <view class="inputClass">
    <input style="height:100%;" adjust-position="{{false}}" placeholder="键盘弹起时，不上推页面"></input>
  </view>
  <view class="cssname">hold-keyboard: true</view>
  <view class="inputClass">
    <input style="height:100%;" hold-keyboard="{{true}}" placeholder="focus时，点击页面的时候不收起键盘"></input>
  </view>
  <view class="cssname">cursor-spacing : 30</view>
  <view class="inputClass">
    <input cursor-spacing="30" value="{{selectionText}}"
      focus="{{isSelection}}"
      selection-start="2"
      selection-end="7"></input>
  </view>
  <view class="cssname">selection-start : 2, selection-end: 7</view>
  <view>
    <button bindtap="selectionTap">自动焦点时，设置光标选中</button>
  </view>
  <view class="cssname">keyboard-accessory</view>
  <view class="textareaClass">
    <input placeholder="设置键盘上方工具栏视图">
      <keyboard-accessory style="display:flex;height: 50px;">
        <cover-view bindtap="keyboardTap" style="flex: 1; background: green;">1</cover-view>
        <cover-view bindtap="keyboardTap" style="flex: 1; background: red;">2</cover-view>
      </keyboard-accessory>
    </input>
  </view>
  <view class="cssname">事件绑定</view>
  <view class="inputClass">
    <input
    bindfocus="bindfocus"
    bindinput="bindinput"
    bindblur="bindblur"
    bindconfirm="bindconfirm"
    bindkeyboardheightchange="bindkeyboardheightchange"
    ></input>
  </view>
  <view class="cssname">bindfocus:输入框聚焦时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindfocus}}</text>
  <view class="cssname">bindinput:键盘输入时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindinput}}</text>
  <view class="cssname">bindblur:输入框失去焦点时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindblur}}</text>
  <view class="cssname">bindconfirm:点击完成按钮时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindconfirm}}</text>
  <view class="cssname">bindkeyboardheightchange:键盘高度发生变化的时候触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{bindkeyboardheightchange}}</text>
</view>

// pages/component/pages/input/input.js
Page({
  data: {
    types:[
      { type: 'text', desc: 'text:默认文本输入键盘' },
      { type: 'number', desc: 'number:纯数字输入键盘' },
      { type: 'digit', desc: 'digit:带小数点的数字键盘' },
      { type: 'idcard', desc: 'idcard:身份证输入键盘' },
      { type: 'phone', desc: 'phone:电话输入键盘' },
      { type: 'url', desc: 'url:网址输入键盘' },
      { type: 'email', desc: 'email:邮箱输入键盘' }
    ],
    confrimTypes: [
      { type: 'send', desc: 'send:发送' },
      { type: 'search', desc: 'search:搜索' },
      { type: 'next', desc: 'next:下一个' },
      { type: 'go', desc: 'go:前往' },
      { type: 'done', desc: 'done:完成' }
    ],
    isSelection: false,
    selectionText: '指定光标与键盘的距离'
  },
  bindfocus: function (e) {
    this.setData({
      bindfocus: JSON.stringify(e, null, 2)
    })
  },
  bindinput: function (e) {
    this.setData({
      bindinput: JSON.stringify(e, null, 2)
    })
  },
  bindblur: function (e) {
    this.setData({
      bindblur: JSON.stringify(e, null, 2)
    })
  },
  bindconfirm: function (e) {
    this.setData({
      bindconfirm: JSON.stringify(e, null, 2)
    })
  },
  bindkeyboardheightchange: function(e) {
    this.setData({
      bindkeyboardheightchange: JSON.stringify(e, null, 2)
    })
  },
  selectionTap: function(e){
    this.setData({
      isSelection: true,
      selectionText: '指定光标与键盘的距离'
    })
  },
  keyboardTap: function(e){
    mc.showModal({
      showCancel: false,
      content: '点了点我'
    })
  }
})