從0開始寫小程序（七）input輸入框的操做

input輸入框的操做，獲取焦點清除，獲取輸入的內容跳轉

首先在wxml裏寫好準備調用的方法，用bindfocus觸發獲取焦點的事件，用bindinput觸發文本輸入時的事件

<input class="input_text" type="text" bindfocus="clear" bindinput="inputselect" value="{{clear}}" />
      <button class="search_btn" bindtap="selecttoresult">搜索</button>

這個方法是經過獲取焦點時和觸發文本輸入時對data裏的數據進行操做來實現功能的，經過bindtap觸發動做，
因此在js裏先要聲明數據容器：

  data: {
    select:'五花肉',
    clear:'   五花肉',
  },

接下來是上面三個動做的方法

 selecttoresult:function(){
    if(this.data.select!='   ')
    {
    wx.navigateTo({
      url: '../result/result?action=selectkind&key='+this.data.select,
    });
    }
  },
//上面的方法是點擊後獲取下面inputselect寫入data裏的值而後跳轉

 clear: function (e) {
    this.setData({
      clear: '   '
    })
  },
//這個方法是當獲取焦點時，清空data裏clear容器裏的數據

 inputselect: function (e) {
    this.setData({
      select: e.detail.value
    })
  }
//這個方法是在觸發輸入動做時，把輸入的內容寫入data裏的select容器裏