本文是作者在閱讀了相關(guān)文章后，對于復(fù)選框選中時(shí)可以將選項(xiàng)添加到文本框中的一些理解，來與大家分享，一起來看看~

昨天閱讀了小樓老師一篇文章，關(guān)于復(fù)選框選中時(shí)可以將選項(xiàng)添加到文本框中，覺得很實(shí)用，所以想用自己的理解分享出來，直接上圖說明。

沒有選中復(fù)選框時(shí)，文本框提示“未選擇興趣。。。”

選中復(fù)選框時(shí)，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開。

取消復(fù)選框時(shí)，文本框中相應(yīng)的內(nèi)容取消。

是不是感覺還不錯(cuò)，見過很多這方面的例子？

接下來我給大家詳細(xì)講解一下，如何實(shí)現(xiàn)。

一、分析

需要實(shí)現(xiàn)的效果如上所述：

1. 沒有選中復(fù)選框時(shí)，文本框提示“未選擇興趣。。。”；
2. 選中復(fù)選框時(shí)，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開；
3. 取消復(fù)選框時(shí)，文本框中相應(yīng)的內(nèi)容取消。

二、元件準(zhǔn)備

從元件庫中拖一個(gè)復(fù)選框，命名“checkbox”,一個(gè)多行文本框，命名“hobbyingput”接下來我們開始實(shí)現(xiàn)逐步實(shí)現(xiàn)上述功能。

三、交互

1. 沒有選中復(fù)選框時(shí)，文本框提示“未選擇興趣。。?！?/h3>

這個(gè)很容易實(shí)現(xiàn)我們只需給文本框添加提示文字“未選擇興趣。。?！?，并影藏邊框。

2. “選中復(fù)選框時(shí)，文本框中顯示復(fù)選框中的內(nèi)容，并用“，”隔開”

我們給復(fù)選框“選中時(shí)”添加用例，設(shè)置文本給文本框“bobbyinput”，用“[[Target.text]],[[This.text]]”實(shí)現(xiàn)，“Target.text”為文本框現(xiàn)有的文本，“This.text”為復(fù)選框中文本，也就是把復(fù)選框中的內(nèi)容放到文本框中的內(nèi)容后面，中間用“，”隔開。

瀏覽器預(yù)覽時(shí)：

這樣的話“未選擇興趣。。?！币擦粼诹宋谋究蛑?，這和我們的意愿違背，那么如何取消前面的“未選擇興趣。。。”？

我們在文本框“文本改變時(shí)”設(shè)置文本與“bobbyinput”用[[This.text.replace(‘未選擇興趣。。。’,”)]]實(shí)現(xiàn)，我們把當(dāng)前文本框中的文本進(jìn)行替換，公式中的函數(shù)replace能夠?qū)ξ谋緝?nèi)容進(jìn)行替換，第一個(gè)參數(shù)是被替換的內(nèi)容，第二個(gè)參數(shù)是替換后的內(nèi)容。

瀏覽器預(yù)覽：

我們成功的把文本框中的“提示文字”取消了，但是又有了一個(gè)新的問題，“，”出現(xiàn)在了“bobbyinput”文本框的前面，這明顯也不是我們想要的，這個(gè)問題我們先放下，后面再集中解決，我們先解決“復(fù)選框取消時(shí)，文本框中相應(yīng)的內(nèi)容取消”。

3. “取消復(fù)選框時(shí)，文本框中相應(yīng)的內(nèi)容取消”

我們給復(fù)選框“選中取消時(shí)”添加用例，設(shè)置文本給“hobbyinput”用“[[Target.text.replace(This.text,”)]]“實(shí)現(xiàn)，也就是當(dāng)復(fù)選框選中取消時(shí)，替換目標(biāo)文本（多行文本框）中的內(nèi)容，replace()函數(shù)前面介紹過了。

這里我剛開始給“this.text”也添了“ ” ”，但是瀏覽器預(yù)覽發(fā)現(xiàn)并不能達(dá)到效果，我理解應(yīng)該是“變量或者函數(shù)”直接使用，不用添加‘’，但是使用文本，或者符號需要添加‘’。

瀏覽器預(yù)覽：

咦！好像實(shí)現(xiàn)了哦。但是又有一個(gè)新問題，復(fù)選框文本是不見了，但是“，”仍然存在，而且每選中一次，取消一次，就會多一個(gè)“，”。

好了，現(xiàn)在做到這里我們需要將復(fù)選框多復(fù)制幾個(gè)，再到瀏覽器預(yù)覽，發(fā)現(xiàn)了幾個(gè)問題，也就是我們現(xiàn)在所遇到的問題。

（1）中間有兩個(gè)或者更多?“，”存在

（2）最前面有一個(gè)“，”存在

（3）最后面有一個(gè)“，”存在

接下來我們一 一分析，重點(diǎn)也來了。

我們先解決“中間有兩個(gè)或者更多?“，”存在”，因?yàn)槌霈F(xiàn)這個(gè)問題的根本原因就是我們向文本框添加了內(nèi)容，導(dǎo)致它的文本發(fā)生了改變。所以，我們在前面文本框“文本改變時(shí)”添加例“case2”添加條件。

如果文本框中包含“,,”替換為“，”。

瀏覽器預(yù)覽，問題解決。

接下來解決“最前面有一個(gè)“，”存在”同樣在文本框“文本改變時(shí)”添加用例“case3”添加條件。獲取元件文字的第一位，我們通過公式“[[This.text.charAt(0)]]”獲取。

函數(shù)charAt能夠獲取指定位置的字符，字符串索引位置從0開始，也就是說第一位的位置就是0。

“[[This.text.substr(1)]]”函數(shù)substr能夠?qū)ξ谋具M(jìn)行截取，只輸入一個(gè)參數(shù)時(shí)，表示從指定位置截取到末尾。字符串索引位置從0開始，所以這里參數(shù)為1，就是從第二位截取到末尾。

瀏覽器預(yù)覽：

也解決了，終于到了最后一個(gè)問題。

最后我們解決“最后面有一個(gè)“，”存在”，同樣的方法，在文本框“文本改變時(shí)”添加用例“case4”添加條件。獲取元件文字的最末位，我們通過公式“[[This.text.slice(-1)]]”獲取。

函數(shù)slice也是文本截取函數(shù)，參數(shù)為負(fù)數(shù)時(shí)表示從后向前讀取位置，-1就是倒數(shù)第一位，只輸入一個(gè)參數(shù)時(shí)，表示從指定位置截取到末尾。

這里我試著用replace（）函數(shù)方法替換，因?yàn)槲谋究蜃詈蟛话?，”所以會替換掉整個(gè)文本框中的“，”為空白，就沒有“，”隔開效果了。

所以還是要用小樓老師的方法：[[This.text.substr(0,This.text.length-1)]]。

函數(shù)substr，輸入兩個(gè)參數(shù)時(shí)，第一個(gè)參數(shù)為截取的起始位置，第二個(gè)參數(shù)為截取的數(shù)量。

系統(tǒng)變量length能夠獲取文本的長度，也就是字符數(shù)量，所以第二個(gè)參數(shù)“This.text.length-1”表示獲取文本當(dāng)前的字符數(shù)量然后進(jìn)行減1的計(jì)算。

通過這樣的操作，我們就能舍棄掉文本的最后一位。

就是從最面開始截取，如果文本最后存在“，”那么截取位置就是從0到文本倒數(shù)第二位。

瀏覽器預(yù)覽：

到這里，我們?nèi)繉?shí)現(xiàn)了復(fù)選框選中時(shí)文本內(nèi)容添加到文本框，花了兩個(gè)小時(shí)寫了這篇文章，雖然花了不少時(shí)間，但是寫出了之后還是挺滿足的，這樣做主要是：

1. 自己再次動手，熟練了一遍；
2. 分享給大家，我們一起學(xué)習(xí)，一起進(jìn)步。

以后，我還會寫關(guān)于Axure的小文章，歡迎大家交流學(xué)習(xí)

原型預(yù)覽：https://z7ox7s.axshare.com

源文件下載：https://pan.baidu.com/s/1qja_hBVRezpjPowL8MPuKw 密碼：ojru

本文參考文章：http://www.iaxure.com/5955.html

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議