axure教程（一）文本框焦点效果

最新推荐文章于 2024-05-04 21:59:18 发布
最新推荐文章于 2024-05-04 21:59:18 发布
阅读量8.7k 收藏 3
点赞数
分类专栏： Axure教程 文章标签： Axure教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxhjh/article/details/17019545
版权
本文档详细介绍了如何使用Axure创建文本框，并实现文本框获取焦点时清空默认文字，以及失去焦点时判断内容为空则显示默认文字的功能。通过设置部件属性和交互事件，实现了用户友好且功能完整的文本输入体验。
摘要由CSDN通过智能技术生成

实现目标：

1、 文本框默认显示文字

2、 文本框获取焦点时如果是默认文字，则文本框清空，否则无动作；

3、 文本框失去焦点时如果内容为空，则显示默认文字，否则无动作。

最终效果如下图1：(如果效果不显示，可以单击图片在新页面中查看效果)


图1

实现过程：

1、控件摆放

     A、依次从控件库中拖出“文本面板"和"文本框",然后在“文本面板"中

最低0.47元/天 解锁文章
lxhjh
关注
专栏目录
小楼axure图文教程（一）文本框焦点效果
07-12
在本文中，我们将深入探讨如何使用Axure RP创建一个具有文本框焦点效果的原型，这在产品经理和交互设计师的工作中非常常见。Axure是一款强大的原型设计工具，它允许用户通过图形化界面快速构建交互原型，而无需编程...
获取焦点的和不获取的区别
#7的博客
05-10 282
获取焦点的和不获取的区别在于：获取焦点以后直接点击回车键，可以触发按钮或其他组件；不获取焦点则没有此效果；<html><head><style type="text/css">a:active {color:green}</style><script type="text/javascript">function getfocus
AxureRp8成果发布后不能直接预览的解决办法
夜郎King的博客
02-18 6651
本文重点讲述在Axure rp8的使用过程中，生成网页后不能直接预览的两种解决办法，第一种是安装浏览器插件的办法，另外分享一种通用的解决办法。
Axure获取焦点动画
hxhx11的博客
04-25 1824
拉两个文本框，一个在属性的提示文字上打上文字“账号”，类型为“Text”。 另一个在属性的提示文字上打上文字“密码”，类型为“密码”。 拉入一个按钮，改变其大小、颜色，并打上文字“登录”。 拉两个二级标题，改变其文字。 隐藏标题，选中一个文本框，双击文本改变时，点击隐藏，选中与之对应的标题，点击确定。 另一个文本框一样。 选中按钮，双击鼠标单击时，点击编辑条件，添加行。 两个文本框元件文字等于空，点击确定。 点击显示，选中两个文本框，点击设置焦点，选中账号文本框，点击确定
Axure的交互以及情形的介绍
lijie1025的博客
12-16 1634
通俗来讲就是，谁用了什么方法做了什么事情，主体"谁"对应的就是axure中的元件，"什么方法"对应的就是交互事件，比如单击事件、双击事件，"什么事情"对应的就是交互动作，比如打开连接、设置面板状态等。。当然除了这三个基本的元素外，还可以设置交互样式。例如鼠标悬停、鼠标按下等。在浏览有些网站时，当你的鼠标移动到某个位置上，就会出现一些东西，鼠标移开了，就没有了。这就是鼠标悬停。
Axure RP Pro - 相关问题 - Wireframe线框绘制尺寸的范围及处理方案
胡争辉
02-25 2144
Axure RP Pro - 相关问题 - Wireframe线框绘制尺寸的范围及处理方案在Axure RPPro中，Wireframe线框图的绘制范围限制在4800px *4800px的范围内，如果绘制的宽度或高度超过了这个范围，特别是高度经常会超过这个范围，就不能直接绘制，此时可以借助于缩放功能绘制，例如在Zoom缩放下拉列表框中选择80%，绘制范围就变成了6000px *
Axure获取焦点和触发事件
weixin_45331546的博客
01-15 3293
获取焦点 在这里我们用一个简单的登录页面来实现获取焦点的效果 首先，先介绍一下这个效果，在我们平常时登录QQ时我们会发现，当我们什么都不填就直接点击登录按钮时,就会有提示说账号不能为空和密码不能为空。而当我们只填账号不填密码时，一样会提示密码不能为空，只填密码不填账号会提示账号不能为空。其实在Axure中可以用获取焦点来提示用户填什么，下面忽列一些验证来实现 第一步给账号文本框设置“文本改变时”隐藏账号提示“账号不能为空”，一样的设置密码文本框隐藏时密码提示“密码不能为空”。 第二步设置登录按钮的交互事件
Axure RP7.0高清视频教程(62节）.zip
08-09
第06节：元件焦点的控制.wmv 第07节：设置条件的类型.wmv 第08节：设置条件的操作.wmv 第09节：第一次接触动态面板.wmv 第10节：元件的移动效果.flv 第11节：第一次接触全局变量.flv 第12节：公式的使用和局部变量...
一个实例熟悉Axure主要技巧
08-21
动态面板是Axure的一个核心功能，它可以模拟页面的滚动、选项卡切换等交互效果。通过创建多个状态，动态面板可以展示不同场景的内容，非常适合构建复杂组件或模块。 3. **交互设置**： 在Axure中，你可以为每个...
程矢Axure夜话图文教程中继器模糊搜索.pdf
02-16
这里可以设置当页面加载时，文本框获得焦点并清空所有数据，确保用户初次打开页面时处于一个干净的状态，便于操作。 - **步骤5：预览或生成原型** - 在完成上述步骤后，可以通过Axure RP提供的预览功能查看模糊...
小楼axure 图文教程（十一）新手入门基础（3）
07-14
Axure RP是一种功能强大且灵活的原型设计工具，它提供了丰富的事件处理机制，用于响应用户交互和实现复杂的交互效果。下面我们将详解Axure RP中的事件处理机制。 一、基本事件 Axure RP中有多种基本事件，包括： ...
Axure 获取焦点
weixin_57765775的博客
07-17 1105
Axure 获取焦点 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术： Axure RP 8 作者：苏恩祺 撰写时间：2021/7/17 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 1.打开Axure软件 2.在元件库那里拉出一个一级标签，改成“登录”，再从元件库里拉出两个文本框，一个命名为“账号”，一个
2024年Web前端最全vue echart 散点图画矩形区域，前端开发培训学校
2401_84411072的博客
05-04 606
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
axure教程
letmeflee112的专栏
02-01 821
名词解释 线框图：一般就是指产品原型，比如：axure教程把线框图尽快画出来和把原型尽 快做出来是一个意思。 axure 元件：也叫 axure 组件或 axure 部件，系统自带了一部分最基础 常用的， axure教程网上也有很多别人做好的， 软件使用到一定阶段可以考虑自己制作 元件，以便提高产品原型的制作速度。 生成原型：是指把绘制好的原型通过 axure rp 生成静态的 html 页...
html5文本框获取焦点,CSS3实现文本输入框获取焦点高亮显示
weixin_42356340的博客
06-03 1716
有看到一些网站的表单提交页面中，当文本宽获取焦点时会渐渐呈现出高亮显示的效果。本文通过CSS3实现了文本输入框获取焦点高亮显示的效果。代码如下:CSS代码：input[type=text]:focus{-webkit-transition:all linear .2s;-moz-transition:all linear .2s;transition:all linear .2s;outline:...
 Axure RP 8 获取焦点的应用
Mc维嘉的博客
02-02 2225
Axure RP 8 获取焦点的应用 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Axure RP 8 作者：曾维嘉 撰写时间：2021年02月03日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
Axure RP 9 新手养成计划，自学记录篇（1）文本框焦点效果
蝴蝶少年的博客
06-05 2140
详细步骤 摆放两个输入框，并输入文本名称，设置文本颜色为灰色 点击账号文本框，如果获取焦点时，如果文本框值=请输入用户名，则清空文本框；否则没有动作（保留原值） 点击账号文本框，如果失去焦点时，如果文本长度=0，则设置文本为：请输入用户名；否则没有动作（保留原值） ...
Axure 内容改变赋值（新人踩坑）
qq_41745067的博客
08-09 363
前言 登录时创建密码框，通过动态面板实现密码的隐藏与显示 实现
axure切换焦点文本框样式
weixin_34054931的博客
04-28 1028
在之前的文章中，我们介绍过在axure中自定义文本框样式的方法，今天我们再深入一些，当文本框的焦点发生变化时，动态切换焦点文本框的样式。先看效果：制作步骤：先把文本框的默认样式做出来：拖入两个文本框，分别命名为用户名、密码，隐藏边框，设置好提示文字；、拖入两个矩形，设置高度略大于文本框，边框颜色为浅灰色，分别命名为用户名边框、密码边框，分别把两个文本框置于对应的边框上方。开始...
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功能，并且确保浏览器支持此功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值