1. 程式人生 > >微信小程序監聽input輸入並取值

微信小程序監聽input輸入並取值

col com 9.png log color 程序 html console pos

小程序的事件分為兩種,冒泡和非冒泡事件,像<form/>submit事件,<input/>input事件,<scroll-view/>scroll事件等非冒泡事件,需要到組件的文檔裏去找,如下是我截圖的一些常用的非冒泡事件

非冒泡事件:當一個組件上的事件被觸發後,該事件不會向父節點傳遞。

技術分享圖片

技術分享圖片

技術分享圖片

想要實時監聽input的輸入只要使用bindinput就可以了,

wxml:

  <input bindinput=‘watchPassWord‘ type=‘password‘ class="weui-input" placeholder="請輸入密碼" />

js:

Page({
  // 監聽輸入
  watchPassWord: function (event) {
    console.log(event.detail.value);
  }
})

event是當前的事件對象,包含當前的各種信息,detail就是我們需要的信息了,按自己的需求處理就好,console展開如下:

技術分享圖片

冒泡事件:當一個組件上的事件被觸發後,該事件會向父節點傳遞。

技術分享圖片

微信小程序監聽input輸入並取值