Axure教程:选中复选框时,如何将文本添加到文本框中?
选中复选框
昨天,我读了萧楼老师的一篇文章,关于当复选框被选中时给文本框添加选项。我觉得很实用,所以想分享一下自己的理解,直接在上面说明。
如果未选中该复选框,文本框将提示“没有兴趣被选中。。网站怎么seo话“
选中复选框后,复选框的内容将显示在文本框中,并用“,”分隔。
取消复选框后,文本框中的相应内容也将被取消。
感觉好吗?你见过很多这方面的例子吗?
接下来我会详细说明如何实现。
一、分析
要达到的效果如下:
如果未选中该复选框,文本框将提示“没有兴趣被选中。。“;
选中复选框时,复选框的内容显示在文本框中,并用“,放心网站seo网站报价”分隔;
取消复选框后,文本框中的相应内容也将被取消。
二、组件准备
从组件库中拖动一个复选框,将其命名为“checkbox”,一个多行文本框,将其命名为“hobbyingput”,然后我们开始一步一步地实现上述功能。
第三,互动
1.如果未选中该复选框,文本框将提示“没有兴趣被选中。。“
这很容易实现。我们只需要在文本框中添加提示文本“无兴趣选择”。。。“,还有隐藏边界。
2.选中复选框后,复选框的内容将显示在文本框中,并用“,”分隔
我们将用例添加到复选框“选中时”,将文本设置为文本框“bobbyinput”,并使用“[[Target.text]]、[[This.text]”、“Target.text”是文本框中的现有文本,“This.text”是复选框中的文本,即把复选框中的内容放在带""
当浏览器预览时:
在这种情况下,“没有选择兴趣。。“还停留在文本框里,这与我们的意愿相悖,seo搜索优化提高网站的那么如何取消之前的“未选兴趣”。。。“?
我们用[[this . text . replace(& # 8216;未选择兴趣。。。& # 8217;,& # 8221;)]],我们替换当前文本框中的文本,公式中的replace函数可以替换文本内容。第一个参数是被替换内容,第二个参数是被替换内容。
浏览器预览:
我们成功取消了文本框中的“提示文字”,网站怎么seo话但出现了新问题。“,”出现在“bobbyinput”文本框前面,这显然不是我们想要的。我们应该先把这个问题放下,然后再重点解决。我们首先要解决的问题是“当复选框被取消时,文本框中相应的内容也被取消”。苏州seo快速排名优化
3.取消复选框后,苏州seo快速排名优化文本框中的相应内容也将被取消
我们将用例添加到复选框“当被选中和取消时”,并将文本设置为“hobbyinput”,seo搜索优化提高网站的用“[target.text.replace (this.text,& # 8221;)]"实现,即选中复选框并取消时,替换目标文本(多行文本框)中的内容。replace()函数在前面介绍过。
这里我刚开始加“& # 8221;”但是,浏览器预览无法达到效果。我理解“变量或者函数”应该直接使用,不需要添加“”,但是使用文本,或者符号需要添加“”。苏州seo快速排名优化
浏览器预览:
啧啧!好像实现了。但是还有一个新问题。复选框文本丢失,但“,”仍然存在,每次检查并取消它时,还会有一个。seo搜索优化提高网站的
好了,现在要这么做,我们需要多复制几个复选框,然后在浏览器中预览,发现几个问题,也就是我们现在面临的问题。
(1)中间有两个或多个“,”
②前面有一个“,”
③后面有一个“,”
接下来我们逐一分析,放心网站seo网站报价重点来了。
我们首先解决“中间有两个或更多”的问题,因为这个问题的根本原因是我们在文本框中添加了内容,导致其文本发生了变化。因此,我们在前面的文本框中添加了“当文本改变时”的例子“case2”来添加条件。
如果文本框包含“,”,请将其替换为“,”。
浏览器预览,问题解决。
然后解决“前面有一个”,“在前面”的问题,在文本框中添加“文本变化时”的用例“case3”。获取组件文本的第一个数字,通过公式“[This.text.charAt(0)]”获得。
函数charAt可以获取指定位置的字符,字符串的索引位置从0开始,这意味着第一个位置是0。
"[[This.text.substr(1)]]函数substr可以截取文本。当只输入一个参数时,表示从指定位置截取到最后。字符串的索引位置从0开始,所以这里的参数是1,从第二位到结尾截取。
浏览器预览:
也解决了,终于到了最后一个问题。
最后,我们解决了“有一个”、“在最后”的问题。同样,我们在“当文本改变时”文本框中添加用例“case4”。获取组件文本的最后一位,通过公式“[This.text.slice(-1)]”获得。
函数切片也是一个文本裁剪函数。当参数为负时,表示从后向前读取位置。-1是最后一个数字。当只输入一个参数时,表示从指定位置裁剪到最后。
在这里,我尝试用replace()函数方法替换它,因为文本框末尾不包含“,”所以它会将整个文本框中的“,”替换为空白,放心网站seo网站报价并且不会有“,”分隔效果。
因此,我们应该用萧楼老师的方法:【【这个。text.substr (0,this。text.length-1)]。
函数substr,当输入两个参数时,第一个参数是拦截的起始位置,第二个参数是拦截的数量。
系统变长可以得到文本的长度,也就是字符数,所以第二个参数“This.text.length-1”的意思是得到当前文本中的字符数,然后减去1。
通过这样做,我们可以丢弃文本的最后一点。
也就是从顶部截取文本。如果文本末尾有“,”截取位置是从0到文本倒数第二个位置。
浏览器预览:
在这里,我们都已经意识到,当复选框被选中时,文本内容被添加到文本框中。写这篇文章花了两个小时。虽然花了不少时间,但是写完还是挺满意的。这主要是:
自己再做一遍,再精通一遍;
分享给大家,我们一起学习,一起进步。
以后我会写一篇关于Axure的小文章,欢迎大家交流学习
原型预览:https://z7ox7s.axshare.com
源文件下载:https://pan.baidu.com/s/1qja_hBVRezpjPowL8MPuKw密码:ojru
标题图来自Unsplash,基于CC0协议
相关阅读WORD文本框和文本框互不覆盖
用WORD或WPS绘制电路框图时,需要将一个文本框放在一个矩形框中,经常需要将文本框和文本框混合在一起,但是两个文本框靠得很近
JQuery获取由select选择的值
通过选择获得的由jQuery选择的值最初被认为是jQuery(& quot;# select1 & quot)。网站怎么seo话val();是获取选定的值,然后是jQuery(& quot;# select1 & quot)。text();是获得的文本
Windows浏览打开文件夹并选择文件
QString strSelect = & quot/select,& quot;QString path = strfileName//文件地址路径。替换(& quot/& quot;,& quot\ \ & quot);//发送"/& quot;带“\ & quot
选中,复选框设置被选中和取消选中
复选框$(& # 039;# checkbox & # 039)。attr(& # 039;选中& # 039;,true) //将输入框的状态设置为checked $(& # 039;# checkbox & # 039)。attr(& # 039;选中& # 039;,false) //移动
【安卓业务开发】看似酷炫的功能其实没那么难实现
产品经理在两个连续的项目中要求这段时间来实现这样的要求,即所选水平滚动视图中的项目应始终显示在屏幕的中间