【Kevin Learn 小程序】--＞input

效果图

属性

参考：input

代码

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/input/input"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. input.js

Page({
  data: {
    focus: false,
    inputValue: ''
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  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()
    }
  }
})

4. input.json

{
  "navigationBarTitleText": "input 组件"
}

5. input.wxml

  
    
      可以自动聚焦的input
      
        
          
        
      
    
    
      控制最大输入长度的input
      
        
          
        
      
    
    
      实时获取输入值：{{inputValue}}
      
        
          
        
      
    
    
      控制输入的input
      
        
          
        
      
    
    
      控制键盘的input
      
        
          
        
      
    
    
      控制占位符颜色的input
      
        
          
        
      
    
  

6. input.wxss

@import "../../common/lib/weui.wxss";

.page-section{
  margin-bottom: 20rpx;
}