首页 > 其他分享 >axure——文本输入框交互

axure——文本输入框交互

时间:2023-11-06 18:12:40浏览次数:29  
标签:鼠标 文本框 输入框 点击 选中 axure 文本 交互

在登录界面中,包含用户名与密码的输入框。当鼠标点击进入输入框时,输入框边框与内部图标变为蓝色,鼠标离开输入框点击别处,边框回复灰色。举例:百度账号登录界面,文本输入框展示效果如下:


操作分解:

1.选中左侧文本框元件,鼠标拖拽至右侧画布中,设置宽302,高42,线框颜色为#D5D2D2(颜色数值仅供参考,只要调成灰色即可)

3.选中文本框——点击【提示】——点击【提示属性】——点击【文本】选择下拉框中的【邮箱】——【提示文本】输入“手机/邮箱/用户名”,——点击【获取焦点】选择下拉框中的【输入】,点击任意空白处完成设置,我们看到文本框中“手机/邮箱/用户名”为灰色字体,鼠标选中文本框之后,该文本消失。

鼠标选中文本框之后,灰色文字提示消失

4.点击最下方【常见交互】中的“获取焦点交互样式”——点击【+更多样式选项】——勾选【线段颜色】——点击旁边的灰色色块,输入颜色数值#83B5F0(颜色数值进攻参考,只要调成蓝色即可)——点击【确定】

5.选中文本框——按住ctrl键,鼠标往下拖动,复制一个同样的文本框,调整两个文本框之间的距离

6.选中复制的文本框——点击【提示】——点击【提示属性】--点击【文本】选择下拉框中的【密码】--【提示文本】将“手机/邮箱/用户名”改为“密码”,点击任意空白处完成设置,我们看到文本框中“密码”为灰色字体,鼠标选中文本框之后,该文本消失。

鼠标选中文本框之后,灰色文字提示消失

7.最后一步,密码后面的绿色键盘标志的设置

图例

7-1.左侧自带元件库中搜索“键盘”——鼠标选中该元件,拖拽至第二个文本框中,调整位置和大小——将该原件填充为绿色,颜色数值#7FDF44(颜色数值仅供参考,调成绿色即可)

“键盘”元件添加效果

7-2.选中“键盘”元件,点击右上方“眼睛”的标志,设置为隐藏,这样我们就看不见它了!

7-3.选中第二个文本框——点击【新建交互】——选择【获取焦点时】——选择【显示/隐藏】——目标选择【形状】也就是键盘元件——点击【确定】

7-4.再次选中第二个文本框——点击【新建交互】——选择【失去焦点时】——选择【显示/隐藏】——目标选择【形状】也就是键盘元件——点击“隐藏”——点击【确定】。到这里算是已经完成了全部操作,按F5预览效果即可。

最终效果

标签:鼠标,文本框,输入框,点击,选中,axure,文本,交互
From: https://www.cnblogs.com/EllenSong/p/17813364.html

相关文章

  • Axure——按钮交互:打开链接&关闭窗口
    (1)打开链接——在当前窗口打开链接1.选中按钮元件——单击【新建交互】——选择【单击时】——选择【打开链接】——【链接到外部URL】并输入对应的网址,如www.baidu.com——点击【确定】我们按F5预览一下效果:点击按钮,在当前窗口打开百度页面(2)打开链接——在新窗口打开链接1.......
  • 白屏时间first paint和可交互时间dom ready的关系是先触发first paint ,后触发dom read
    页面的性能指标详解:白屏时间(firstPaintTime)——用户从打开页面开始到页面开始有东西呈现为止首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间用户可操作时间(domInteractive)——用户可以进行正常的点击、输入等操作,默认可以统计domready时间,因为通常会在这时......
  • Process-与操作系统中的进程进行交互
    Process介绍在Java中,Process类是一个抽象类,它提供了与操作系统中的进程进行交互的方法。当你在Java程序中启动一个新的进程(例如,运行一个外部程序或脚本)时,JVM会创建一个Process实例来代表这个新的进程。Process类提供了以下主要的方法:getInputStream():获取进程的标准输出流。你......
  • 在Python中获取飞书群消息,你可以使用`feishu-python-sdk`这个库¹。这是一个用于和飞
    在Python中获取飞书群消息,你可以使用`feishu-python-sdk`这个库¹。这是一个用于和飞书开放平台交互的Python库,它支持同步调用和异步调用,实现了订阅事件和卡片交互回调¹。首先,你需要安装这个库,可以使用pip进行安装:```pythonpipinstallfeishu-python-sdk```然后,你可以使用以......
  • Kubernetes:kube-apiserver 和 etcd 的交互
    kubernetes:kube-apiserver系列文章:Kubernetes:kube-apiserver之scheme(一)Kubernetes:kube-apiserver之scheme(二)Kubernetes:kube-apiserver之启动流程(一)Kubernetes:kube-apiserver之启动流程(二)0.前言上几篇文章介绍了kubernetes的核心数据结构scheme......
  • uniapp微信小程序表单输入框上移事件
    一、问题uniapp制作的微信小程序表单,在使用真机调试时,点击输入框输入内容时,出现输入框上移的情况二、找原因窗体高度固定,导致软键盘弹出时输入框上移三、解决办法1、uniapp官网关于软键盘弹出问题的解决方法在pages.json中配置的写输入框表单的 style"app-plus":{"......
  • 医院床旁交互系统功能具体有哪些
    全视通床旁交互系统功能如下:呼叫功能:支持病床呼叫护士站、护士站呼叫病床、病床呼叫病床等多种呼叫方式,支持语音对讲模式,支持呼叫转移等功能。广播功能:支持护士站向单个或多个病房或病床进行语音广播或视频广播,支持定时广播和手动广播两种方式,支持广播内容的录制和存储。报警功能:支......
  • 直播小程序源码,react-native自定义文本输入框
    直播小程序源码,react-native自定义文本输入框Examplesfromprops: ... _onChange=(label,value)=>{  this.setState({[label]:value}); }; render(){  return(   <Viewstyle={styles.container}>    <Text>     {this.stat......
  • 不会代码,也能批量数据合并,使用Python开发一个图形交互界面
    不会代码,也能批量数据合并,使用Python开发一个图形交互界面大话数据分析​​京东物流经营分析岗​关注他 作为一名数据分析师,日报,周报,月报是少不了的,经常在整理周报或者月报的时候,需要将这周的数据或者该月的数据进行一个汇总,常规地做法是将每一天的数据......
  • vue3实现input输入框只能输入中文
    简单记录下,方便以后复制<el-inputv-model="form.name"placeholder="使用人的姓名":maxlength="20":formatter="(value)=>value.replace(/[^\u4E00-\u9FA5]/g,'')"/>......