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