快好知 kuaihz

Axure教程:多行文本框一键清空 / 限制数量功能

本文主要讲的是多行文本框一键清空 、限制数量功能,一起来看看~

这次我们来讲解一个在多行文本框 一键清空 / 限制数量功能。

一、准备元件

首先打开 Axure 新建文件,拖取一个矩形,设置长度为: 375 px ,高度为: 80 px ;

拖取一个多行文本框,设置长度为: 335 px ,高度为: 60 px,右键设置隐藏边框,设置提醒文字“输入文本时显示清除按钮、数量倒计” ,命名为:“ 输入框 ” ( 这里为随意输入 ) ;

拖取一个文本,设置字体为: 12 px ,色值为 #999999 ,命名为:“ 限制数量展示 ” ;

最后我们再做一个清空按钮,大小 20 px 左右 ,命名为:“ 清空按钮 ” ,然后点击隐藏。

好的,完成之后我们会得到一下的样子:

二、设置输入框的交互样式

(1)双击 “文本改变时” ,设置输入框的 Case 1 的条件为:全部 – 元件文字 – This 等于( “ == ” 是等于的意思)空值,设置隐藏清空按钮。

(2)然后我们再双击 “文本改变时” ,设置 Case 2 的条件为:全部 – 元件文字 – This 不等于( “ != ” 是不等于的意思 )空值,设置显示清空按钮。

(3)第三步双击 “ 获取焦点时 ” ,设置 Case 1 的条件为:全部 – 元件文字 – This – 不等于空值,设置显示清空按钮。

(4)最后我们再双击 “ 失去焦点时 ” ,设置隐藏清空按钮( 此处较简单无配图 )。

此时我们就把清空按钮的功能完善了,现在我们可以来看一下(腾讯视频链接):https://v.qq.com/x/page/p1343kj95p6.html

清空输入框的功能完成了,现在我们要来做字符数量限制,已经完成的小伙伴接着往下看吧!

三、进阶

选择输入框,继续双击 “文本改变时” ,在 Case 3 设置文字于 This 为: “ [[This.text.substr(1,100)]] ” ;

然后再设置 “ 限制数量展示 ” 的富文本为:“ [[100-This.text.length]]/100 ” ,设置为右对齐,不清楚的可以看看下图。

然后我们的所有效果就都已经实现了,各位完成的小伙伴预览一下自己的成果吧!

腾讯视频链接:https://v.qq.com/x/page/i1343yve2yx.html

以上就已制作完所有流程,需要源文件或者有相关问题讨论的,欢迎在下方留言。

end

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:多行  多行词条  一键  一键词条  清空  清空词条  文本  文本词条  数量  数量词条  
原型

 Axure教程:如何用Axure...

放弃一切错误的方法,从今天开始“刻意练习”, 因为这是最强大的,也是唯一正确的学习方法。—《刻意练习》作为一名产品经理,每天都要和技术打交道,技术知识...(展开)

原型

 用Axure做原型,一些提高效率...

前言:在产品经理工作中,特别是初级产品经理,制作原型是主要工作之一。Axure是用的最顺手的原型制作软件,虽然制作移动端在效果上并不是很好,但作为不需要做高保真...(展开)

原型

 Axure教程 | 如何使用中继...

本期教程制作的是web端的幻灯片,制作中使用了中继器做为图片和文本的内容存储源,制作繁琐了一点,但是可以当做初步了解中继器的一种方式。老规矩,先看GIF效果图幻...(展开)