美文网首页
WeChat小程序表单篇~input

WeChat小程序表单篇~input

作者: 王怀智 | 来源:发表于2018-05-12 09:08 被阅读619次

    解释

    小程序input表单(文本,数字,密码)
    <input />

    属性

    属性名 类型 默认值 说明
    value String 输入框的初始化内容
    type String "text" input类型(text,number,idcard,digit)
    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 0 指定光标与键盘的距离,单位为px
    auto-focus Boolean false 自动聚焦,拉起键盘
    focus Boolean false 获取焦点
    confirm-type String "done" 键盘右下角的文字(send,search,next,go,done)
    confirm-hold Boolean false 点击键盘文字,键盘是否收起
    cursor Number 获取焦点focus后,光标位置
    adjust-position Boolean true 键盘弹起,页面自动向上推动
    bindinput EventHandle 有文字输入,触发input事件,e.detail={value值,cursor光标长度}
    bindfocus EventHandle 输入框聚焦时触发,e.detail={value,height}
    bind blur EventHandle 输入框失去焦点时触发e.detail={value}
    bind confirm EventHandle 点击键盘完成时,触发e.detail={value}

    演示

    小程序 input.wxml 小程序 input.js

    示例

    <view class="weui-cells weui-cells_after-title">
            <view class="weui-cell weui-cell_input">
              <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" bindblur='bindblurEvent' placeholder="输入同步到view中"/>
            </view>
          </view>
    
    Page({
      data: {
        focus: false,
        inputValue: ''
      },
      bindKeyInput: function (e) {
        console.log('输入内容触发input事件',e.detail)
        this.setData({
          inputValue: e.detail.value
        })
      },
      bindblurEvent: function (e){
        console.log("失去焦点时",e.detail)
      },
      bindReplaceInput: function (e) {
        var value = e.detail.value
        var pos = e.detail.cursor
        var left
        if (pos !== -1) {
          // 光标在中间
          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'),
      },
      bindHideKeyboard: function (e) {
        if (e.detail.value === '123') {
          // 收起键盘
          wx.hideKeyboard()
        }
      }
    })
    
    

    相关文章

      网友评论

          本文标题:WeChat小程序表单篇~input

          本文链接:https://www.haomeiwen.com/subject/amtcdftx.html