小程序 输入框监听事件

1、html

<view class="coupon-exchange clearfix">
       <view class="code-input">
           <input type="text" placeholder="请输入兑换码" class="input" bindinput="couponExchangeInput" value="{{couponExchangeValue}}" focus="{{couponExchangeInputFocus}}"/>
           <image class="icon-clear" src="{{serverDomain}}miniprogram-img/comm/icon_cancel.png" wx:if="{{iconClearShow}}" bindtap="couponExchangeInputClear"></image>
       </view>
       <view class="btn-exchange {{btnExchangeActive ? 'active' : ''}}" bindtap="couponExchange">兑换</view>
   </view>

2、css

.coupon-exchange{
    width: 702rpx;
    height: 104rpx;
    background: #fff;
    box-shadow: 0 0 4px rgba(153,153,153,0.5);
    margin-top: 20rpx;
    margin-left: auto;
    margin-right: auto;
}
.coupon-exchange .code-input{
    width: 478rpx;
    height: 56rpx;
    background: #eee;
    border-radius: 36rpx;
    margin-left:24rpx;
    margin-top: 24rpx;
    float: left;
    position: relative;
}
.coupon-exchange .code-input .input{
    width: 390rpx;
    height: 36rpx;
    line-height: 36rpx;
    padding: 0rpx 24rpx;
    border: 0;
    background: transparent;
    font-size: 24rpx;
}
.coupon-exchange .code-input .input:focus{
    outline: 0;
}
.coupon-exchange .code-input .icon-clear{
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    top: 8rpx;
    right: 16rpx;
}
.coupon-exchange .btn-exchange{
    float: left;
    width: 134rpx;
    height: 56rpx;
    line-height: 56rpx;
    border-radius: 28rpx;
    background: #bbb;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    margin-left: 28rpx;
    margin-top: 24rpx;
}
.coupon-exchange .btn-exchange.active{
    background: #C11C1C;
}

3、JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    couponExchangeValue: '',
    iconClearShow: false,
    btnExchangeActive: false,
  },
couponExchangeInput: function (e) {
    var _this = this;
    var value = e.detail.value;
    var cursor = e.detail.cursor;
    if(value.length > 0){
      this.setData({
        couponExchangeValue: e.detail.value,
        iconClearShow: true,
        btnExchangeActive: true
      });
    }else{
      this.setData({
        couponExchangeValue: e.detail.value,
        iconClearShow: false,
        btnExchangeActive: false
      });
    }
    if(value.length > 0 && value.length == cursor) {
      if(this.strlen(value) > 50){
        value = this.cut_str(value, 50);
        this.setData({
          couponExchangeValue: value,
        })
      }
    }
  },
  couponExchangeInputClear: function (e) {
    this.setData({
      couponExchangeValue: '',
      iconClearShow: false,
      btnExchangeActive: false,
      couponExchangeInputFocus: true,
    });
  },
  couponExchange: function (e) {
    
  },
  strlen: function(str){
    var len = 0;
    for (var i = 0; i < str.length; i++) {
      var c = str.charCodeAt(i);
      if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
        len++;
      }
      else {
        len += 2;
      }
    }
    len = len/2;
    return len;
  },
  cut_str: function (str, len) {
    var char_length = 0;
    for (var i = 0; i < str.length; i++){
      var son_str = str.charAt(i);
      encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5;
      if (char_length >= len){
        var sub_len = char_length == len ? i+1 : i;
        return str.substr(0, sub_len);
        break;
      }
    }
  }
})