Axure启用禁用设置文本框状态

最新推荐文章于 2022-04-14 10:12:10 发布
最新推荐文章于 2022-04-14 10:12:10 发布
阅读量2.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49983815/article/details/111387058
版权
本文档详细介绍了如何在Axure中设置文本框的不同状态，包括获取焦点时边框变为蓝色，失去焦点时变为灰色，以及根据文本内容长度启用或禁用下方按钮，以及删除按钮的显示和交互逻辑。通过这些步骤，可以创建一个具有完整交互功能的文本框组件。
摘要由CSDN通过智能技术生成 
    Axure启用禁用文本框状态

在这里插入图片描述

在很多案例下有好多文本框状态，下面让我们看一下怎么实现这种效果的吧
先来看一下它的要求

  1. 判断如果文本框获取焦点；矩形边框为蓝色
    在这里插入图片描述

获取焦点为蓝色，这个设置就要设置文本框的选中状态，设置选中状态的线段颜色
获取焦点
在这里插入图片描述

  1. 失去焦点==边框为灰色
    失去焦点
    在这里插入图片描述

设置为false就可以设置为不选中
3. 文本框内容为11位时，显示下面按钮为蓝色并可以点击交互
当文本内容为11位时，显示下面按钮
在这里就要用到我们今天的重点内容，启用，禁用。
当文本框内容发生改变时，并判断是否为11位。

最低0.47元/天 解锁文章
赵wwww
关注
如何用AXURE制作元件禁用
weixin_57762639的博客
06-17 638
一共有10个步骤，按顺序操作下去 1.我们进入Axure时，在左边找到元件库 2.然后从左边拖一个矩形，输录文字 3.然后，在元件库里找到文本框和取消按钮，并隐藏文本框的边框 4.然后，从左边拖一个矩形，添加颜色，去掉边框，改变成圆角矩形，输录文字 5.然后， 我们选择文本框给它添加交互用例 6. 然后，我们选择文本框获取焦点时，选中外面的矩形，失去焦点时取消选中 7.然后，我们选中那个按钮，隐藏，并设置鼠标单击时，删除文本框里的文字 8.然后，给矩形设置选中时的..
Axure：关于文本框文字提示，以及未达到特定长度禁止使用相关元件
Coolstuz的博客
10-03 1125
功能实现如图 实现第一个文本框的样式，只需要对文本框进行以下交互 实现第二个文本框的样式，只需要对文本框进行以下交互 实现第三个文本框则需要在第一或第二的基础上，添加单击交互事件 先给一个矩形命名：“提示”，并设置其透明度为20% 给第三个文本框添加单击交互事件 至此，预览即可实现最终结果。 ...
Axure学习笔记（十三）-简单登录效果实现（使用启用、禁用+获取焦点事件）
weixin_48911487的博客
08-20 305
注：本笔记适用环境：win10+Axure RP 8 1，将输入框组合起来，以免中间的文本框与外界矩形框冲突 2.设定输入框选中与按钮禁用效果 3.用例事件：根据是否获取焦点变动选中与未被选中 同理设置“取消选中” 4.只有当存在文本时，占位符才会出来 最终： 5.只有长度为11位时，按钮才被启用 最终： 6.清空文本 7...
青铜修炼手册：Axure按钮的启用和禁用设计
藤原搞事的博客
08-16 3199
我今天学习了按钮的启用和禁用，所以想拿出来与大家分享一下。我们经常会在一些登录页面看见这种情况：当输入框没有内容时，登录按钮呈灰色状态，而只要你往输入框书写内容，登录按钮就会变成选中状态，如下图所示：    要实现以上效果，需要以下步骤： （1）先在Axure中先按照下图把基本框架给画出来，详细怎么画的我就不说了。基本就一个文本框，一个按钮 （2）点击按钮，然后右方“检视”窗口选择“属...
Axure之按钮的启用和禁用设计
08-16
项目实现教程地址：https://blog.csdn.net/qq_27884377/article/details/81747139
Axure输入框设置输入数字的限制
09-12 4932
我们在用Axure制作原型的时候，经常会使用到一个部件就是——文本框部件。文本框和多行文本框（也叫文本域），是我们制作需要用户填写的功能时使用的部件。 但是在Axure里面文本框的设置存在一些缺陷，让很多朋友在做原型的时候遇到一些困难。比如今天我们一起来看的这个小小的限制功能：如何文本框只能输入数字。 大家可能会想到的一个方法是，设置文本框的类型为数字（number）就可以了，当然...
Axure8案例（二）：注册会员框关于立即注册按钮的禁用和启用
Kayla1014的博客
10-22 1735
Axure8案例（二）：注册会员框关于立即注册按钮的禁用和启用Axure8案例（二）：注册会员框关于立即注册按钮的禁用和启用一、前期准备二、内容效果三、具体步骤一点体会参考资料 Axure8案例（二）：注册会员框关于立即注册按钮的禁用和启用 正在自学Axure8，用的是OS Sierra系统，参考教材是《Axure RP 8——网站和APP原型制作从入门到精通》，讲的很细致，同时也会学习其他人发布...
axure文本框自动换行
05-18
Axure中的文本框默认是自动换行的，当文本框中的内容超出了文本框的宽度时，自动换行到下一行。如果您的文本框没有自动换行，可以尝试以下方法： 1. 确认文本框的宽度是否够大，如果不够大，可以调整文本框的大小。...
Axure 判断
lizhixinglzx的博客
05-17 680
1打开Axure 2拉出一个矩形弄成圆角矩形 3拉出一个垂直线和文本标签，文本标签打上+86大小18 4拉出文本框和提交按钮，文本框加上隐藏边框再做一个× 5把x给隐藏 6给隐藏的x加上动作鼠标单击时设置文本 7给文本框设置动作获取焦点设置选中矩形 8再设置失去焦点取消选中矩形 9选中矩形给矩形设置选中选中 10文本框设置动作文本改变时设置条件文本框元件文字长度==11 11启用矩形 ...
AxureRP8的禁用与启用、移动
MuYouZhi_yx的博客
01-20 1283
启用/禁用：设置元件的不同样式状态。 启用：用户可以操作元件上的交互。 禁用：用户不可操作元件上的交互。 移动：可以实现在页面上的移动。 示例一（启用/禁用）： 打开AxureRP8,制作一个以矩形、文本框、按钮组成的元件。如下图： 选中按钮，并给他设置禁用效果(填充颜色)。选中文本框，并给他设置交互事件的载入时事件，添加动作为启用/禁用、配置动作选中按钮并给按钮设置禁用。 为文本框设置文本改变时的交互事件，首先为文本框设立条件，条件为当前元件文字长度大于当前的值。其后添加启用/禁用动作，并
axure rp9下拉框发生改变时，切换动态面板
热门推荐
笑到世界都狼狈的博客
04-14 1万+
axure rp9实现点击下拉列表时，切换动态面板的效果
Axure制作账号扫码切换登录、控制按钮启用/禁用
weixin_43840279的博客
03-13 1831
从元件库中拖拉一个动态面板，设置想要的宽度和高度 双击动态面板，设置需要切换的面板数量，命名清楚 点击state进入面板详细页，自己设计想要的样式 选中点击触发操作的元件，添加鼠标单击用例：设置面板状态-选中动态面板-【选择状态】选择单击后需要切换到的面板，各个元件命名清楚哦~ 账号登录中文本框禁用/启用登录按钮，选中文本框，添加文本改变时用例 设置用例：【元件文字】【元件名称-自己命...
Axure之解决文本框无法输入
LVXIANGAN的专栏
03-27 8271
 在MacOs + Axure 8.0 开发中，在电脑键盘输入数字“1”时，文本框内容无法显示；快速输入“123”，文本框显示“23”，这时候再输入“4”，又可以正常输入并显示了，真的十分奇怪！引起原因：Axure对中文输入法支持不好。解决方法：把中文输入法关闭，切换为英文键盘输入，OK！...
axure 下拉选项+动态面板
sanluo11的博客
12-16 1600
软件:AxureRP9 一、动态面板 动态面板命名：2 二、下拉框 下拉框命名：1 对下拉框进行添加情形并设置动态面板
axure 如何设置选项联动_Axure下拉框级联操作
weixin_29473667的博客
01-17 6607
现实生活中有很多的下拉框是级联操作的，即因为第一个下拉框的选择，影响到后面的下拉框的选择的列表的数据。或许在代码中，这些操作相对比较简单，通过前一个下拉框的选择项来控制后一个下拉框的数据的动态添加。那么，如何使用Axure来实现这一操作呢，下面提供了几种方法进行参考。下面我们以省市区的三级联动来实现一下。第一种实现方法1、首先在页面中放置三个下拉框，分别用来显示：省、市、区，然后将第二个和第三个下...
Axure RP从入门到精通（八）表单元件
人不风流枉少年
06-04 4068
一：文本框和多行文本框 文本框直接使用HTML中的<input type="text"/>，而多行文本框直接使用HTML中的<textarea>标签。文本框是用来输入单行文本的，而多行文本框可以输入多行文本。 二：下拉列表框和列表框 下拉列表框也是直接使用的HTML中的<select>标签，直接双击元件就可以编辑列表选项。 列表框是将所有选项展示出来，而下拉列表框会将所有选项折叠起来，两者的区别就是选项是否会折叠起来。 三：复选框和单选按钮 单选按钮必须为每一个
产品基础课 Day5： Axure的简单应用
m0_51290571的博客
07-13 337
启用与禁用： 以登录按钮为例： 这里是文本框的交互设计 这里是page的交互设计 效果演示视频： 1、初始时，文本框为空，login 禁用 2、文本框不为空时，login 启用 3、文本框再为空时，login禁用 ...
如何禁止在文本框中输入中文
翠竹轩微雨楼
10-28 1万+
具体步骤： 方法一：用文本框的CSS属性ime-mode实现。       提示：设置ime-mode为disabled的意思是禁止在输入时禁止用户激活输入中文，韩文，日文等的输入法（IME）状态，因为这个只能检测到键盘的输入，对通过鼠标操作的粘贴和拖放无效。 方法二：在松开按键时用脚本检查文本框的值，只保留Unicode编码在0和255之间的字符。 function check(str){ v
Axure怎么实现文本框输入数字增加表格行数
最新发布
09-24
Axure RP是一款用于原型设计的工具，它并不直接支持动态增加表格行数的功能，因为它是基于静态页面的。但是，你可以通过组合交互、JavaScript或者其他条件判断来模拟这样的效果。 1. **创建基础元素**: 首先，你需要有一个表格控件和一个文本框，用户可以在文本框中输入数字。 2. **交互设置**: 使用"数据驱动"功能，可以关联文本框输入的内容到表格的数据源。比如，你可以设置当文本框值改变时，表格会更新。 3. **脚本或者动作**: 在文本框上添加一个事件，例如“On Value Change”，然后编写JavaScript代码，如检查文本框中的输入是否为数字，如果是，则使用JavaScript API（如`rows.add()`）动态向表格追加新的行。 ```html <script> function onTextChange(e) { var value = e.target.getValue(); if (/\d+/.test(value)) { // 假设表格ID是'table1' var table = getWidget('table1').getElement(); var newRow = table.insertRow(table.rows.length); } </script> ``` 记得在你的 Axure 文件中启用JavaScript功能，并且确保浏览器支持此功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值