小程序input控件

小程序的input是通過封裝的,封裝後已是塊級元素,而不是原來的行內元素。html

相似label綁定的方法

按一向的套路,給input加個label標籤綁定,然而發現並不行。
翻看文檔,發現只能綁定4種控件。。。
clipboard.png
那怎麼辦呢,小程序怎麼實現相似label的這種綁定?
還好還好,小程序關上了一扇門,仍是打開了一扇窗!
input控件自帶一個focus屬性,爲true時聚焦,false時失去焦點。詳看小程序input
因此能夠經過給focus綁定一個變量,經過數據驅動來決定是否聚焦。小程序

優勢:更加靈活,不受制於label的限制,只要是能修改到該綁定變量的任何動做,均可以聚焦
缺點:須要js介入,而label標籤不須要函數

小程序input的綁定事件

文檔中input控件有四個原生事件spa

clipboard.png

如今有個需求是將用戶輸入的金額,好比500,失去焦點以後顯示爲¥500,須要用到其中的bindinputbindblur
一開始我打算用一個討巧的辦法(不可行),由於看到bindinput的說明中有一句3d

處理函數能夠直接 return 一個字符串,將替換輸入框的內容
因此我就在bindinput綁定的的方法里加上 if(//失去焦點) return '¥'+ e.detail.value
失去焦點變量由 bindblur綁定的方法控制,僞代碼爲:
//記錄失去焦點狀態的變量改爲true
//調用bindinput綁定的方法,把event對象傳入

沒錯,並無起做用。。。bindblur綁定的方法調用不了bindinput綁定的方法,就好像不能在其餘函數調用生命週期函數同樣code

還好還好,那就別用return了,老老實實經過bindinput綁定的方法獲取輸入的值記錄下來,bindblur事件觸發後把記錄下來的值加工,而後把加工後的值傳給和input控件value屬性綁定的變量。完美!component

相關文章
相關標籤/搜索