資訊專欄INFORMATION COLUMN
摘要：小程序的是經(jīng)過封裝的，封裝后已經(jīng)是塊級元素，而不是原來的行內(nèi)元素。那怎么辦呢，小程序怎么實現(xiàn)類似的這種綁定還好還好，小程序關(guān)上了一扇門，還是打開了一扇窗控件自帶一個屬性，為時聚焦，時失去焦點。
小程序的input是經(jīng)過封裝的，封裝后已經(jīng)是塊級元素，而不是原來的行內(nèi)元素。
類似label綁定的方法按一貫的套路，給input加個label標(biāo)簽綁定，然而發(fā)現(xiàn)并不行。
翻看文檔，發(fā)現(xiàn)只能綁定4種控件。。。
那怎么辦呢，小程序怎么實現(xiàn)類似label的這種綁定？
還好還好，小程序關(guān)上了一扇門，還是打開了一扇窗！
input控件自帶一個focus屬性，為true時聚焦，false時失去焦點。詳看小程序input
所以可以通過給focus綁定一個變量，通過數(shù)據(jù)驅(qū)動來決定是否聚焦。
優(yōu)點：更加靈活，不受制于label的限制，只要是能修改到該綁定變量的任何動作，都可以聚焦
缺點：需要js介入，而label標(biāo)簽不需要
文檔中input控件有四個原生事件
現(xiàn)在有個需求是將用戶輸入的金額，比如500，失去焦點之后顯示為￥500，需要用到其中的bindinput和bindblur
一開始我打算用一個討巧的辦法（不可行），因為看到bindinput的說明中有一句
處理函數(shù)可以直接 return 一個字符串，將替換輸入框的內(nèi)容
所以我就在bindinput綁定的的方法里加上 if(//失去焦點) return "￥"+ e.detail.value
失去焦點變量由bindblur綁定的方法控制，偽代碼為：
//記錄失去焦點狀態(tài)的變量改成true //調(diào)用bindinput綁定的方法，把event對象傳入
沒錯，并沒有起作用。。。bindblur綁定的方法調(diào)用不了bindinput綁定的方法，就好像不能在其他函數(shù)調(diào)用生命周期函數(shù)一樣
還好還好，那就別用return了，老老實實通過bindinput綁定的方法獲取輸入的值記錄下來，bindblur事件觸發(fā)后把記錄下來的值加工，然后把加工后的值傳給和input控件value屬性綁定的變量。完美！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108338.html
摘要：設(shè)置了屬性，清空一下內(nèi)容查看效果設(shè)置了屬性，增加內(nèi)容查看效果運行效果以及用法其中以及請參照的參數(shù)列表，下面，僅列出與上個控件不同的參數(shù)。 最近在看Angular的知識，無論是書中還是網(wǎng)上，講解跟表單有關(guān)的指令集都是點到為止，講些基礎(chǔ)驗證，比如，是否為空，是否為email地址，更多的并沒有講解，但是，當(dāng)我查看Angular的官方文檔時，發(fā)現(xiàn)與input控件相關(guān)的指令集真的很豐富，有關(guān)HT...
摘要：屬性在標(biāo)簽中，屬性可指定顯示不同的表單控件，每個控件都有不同的目的和收集特定類型的數(shù)據(jù)。傳統(tǒng)做法是使用框架如，而推出了標(biāo)簽的新值屬性。目前幾乎所有的應(yīng)用程序的表單都涉及到日期選擇器，如預(yù)約醫(yī)生航班等，雖然可能是不同的形式。 雖只是一個看似簡單的 HTML 表單元素，但它這么一個單一的元素，就有多達 30 多個屬性（attribute），相信無論你是個小菜鳥還是像我一樣寫了 15 年 ...
本文由云+社區(qū)發(fā)表作者介紹：練小習(xí)，2011年加入搜狐，負責(zé)搜狐相冊的產(chǎn)品策劃與前端開發(fā)。2015年后加入騰訊 ISUX (社交用戶體驗設(shè)計部)，目前主要負責(zé)騰訊云的UI開發(fā)工作，專注于人機交互，有豐富的UI開發(fā)經(jīng)驗。 這段時間有幸加入了一個關(guān)于微信小程序的項目開發(fā)組，從無到有的根據(jù)文檔自行學(xué)習(xí)了小程序的開發(fā)過程，前面已經(jīng)有幾位前輩的文章珠玉在前，我這里就先從前端界面的開發(fā)方面談一談小程序以及我...
閱讀 3415·2021-11-24 09:38
閱讀 3193·2021-11-22 09:34
閱讀 2107·2021-09-22 16:03
閱讀 2367·2019-08-29 18:37
閱讀 379·2019-08-29 16:15
閱讀 1769·2019-08-26 13:56
閱讀 865·2019-08-26 12:21
閱讀 2207·2019-08-26 12:15
