微信小程序bindinput與bindsubmit的區(qū)別實例分析

發(fā)布時間：2020-10-08 18:16:32 來源：腳本之家閱讀：274 作者：胡世林欄目：web開發(fā)

本文實例講述了微信小程序bindinput與bindsubmit的區(qū)別。分享給大家供大家參考，具體如下：

實際上的話，bindinput還有bindsubmit是沒有任何的可比性的，但是兩者還是常常被人一起比較，為啥？

比如一個簡單的搜索框，你是愿意選擇使用bindinput還是使用bindsubmit？，雖然一個是表單，一個是文本輸入框，但是兩者都有一個共同點，就是可以去獲取到用戶的輸入信息。這個時候，問題來了，區(qū)別在哪兒？

最簡單的一段代碼在下面：

<form bindsubmit='input1input'>
 <input name="input1" placeholder='這個是輸入框' style='border:1rpx solid #000;'></input>
 <button form-type="submit">提交按鈕</button>
</form>
<input bindinput='input2input' placeholder='這個是輸入框' style='margin-top:200rpx;border:1rpx solid #000;'></input>
<button>提交按鈕</button>

// pages/input/input.js
Page({
 data: { input1: "", input2: "" },
 input1input: function (e) {
  console.log(e);
  console.log(e.detail.value.input1)
 },
 input2input: function (e) {
  console.log(e);
  console.log(e.detail.value);
 }
})

甚是簡單，那么問題來了，區(qū)別在哪兒？

當然，暫時的區(qū)別只有一個，就是console.log比較多，哈哈，開玩笑的。根據(jù)深圳那邊客戶的反應(yīng)，說是使用input的時候，移動光標到一個地方后，輸入一個文字，會重新移動光標的尾部，當然，不是上面的那些代碼了，上面的代碼是沒問題的

有問題的是下面的代碼：

// pages/input/input.js
Page({
 data: { input1: "this is the value for input1", input2: "this is the value for input2" },
 input1input: function (e) {
  console.log(e);
  console.log(e.detail.value.input1);
  this.setData({ input1: e.detail.value.input1 })
 },
 input2input: function (e) {
  console.log(e);
  console.log(e.detail.value);
  this.setData({ input2: e.detail.value })
 }
})

<form bindsubmit='input1input'>
 <input value='{{input1}}' name="input1" placeholder='這個是輸入框' style='border:1rpx solid #000;height:100rpx;'></input>
 <button form-type="submit">提交按鈕</button>
</form>
<input value="{{input2}}" bindinput='input2input' placeholder='這個是輸入框' style='height:100rpx;margin-top:200rpx;border:1rpx solid #000;'></input>
<button>提交按鈕</button>

其實原因很簡單，就在一個地方，就是刷新界面的this.setData這而，為啥？因為你刷新后，value值修改，然后呢？

然后頁面就刷新了，再然后呢？再然后就是因為你設(shè)置的是光標自動移動到最后一步，所以，最好的話是使用input的時候要小心點咯，當然我不是說使用input沒有使用submit好，只是適應(yīng)場景不同而已，比如沒必要使用bindinput的時候去刷新界面，或則說我個人比較偏愛使用bindsbmit吧，。

希望本文所述對大家微信小程序開發(fā)有所幫助。

向AI問一下細節(jié)

微信小程序bindinput與bindsubmit的區(qū)別實例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽