Axure9|带清除按钮的文本输入框

时间:2024-03-21 21:47:59

实现效果:
Axure9|带清除按钮的文本输入框
第一步:选取Axure自带的文本框;
Axure9|带清除按钮的文本输入框
第二步:设置默认提示文本“请输入账号”,选择在获取焦点时隐藏提示,实现点击文本框,隐藏“提示文本”,显示光标;
Axure9|带清除按钮的文本输入框

  • 获取焦点时隐藏提示:鼠标点击,出现输入光标,隐藏提示文本;
  • 若选择输入时隐藏提示:文本框开始输入,隐藏提示文本。

Axure9|带清除按钮的文本输入框
第三步:添加清除按钮,同时将其设置为隐藏;
Axure9|带清除按钮的文本输入框

  • 选中清除按钮,点击“小眼睛”,即可隐藏图标;
    Axure9|带清除按钮的文本输入框
    第四步:选择文本框,设置文本框的交互,实现输入文本时,显示清除按钮;
  • 文本改变时,当文字长度>=1,即开始输入文字,则显示清除按钮;
  • 否则,当文字长度<1,即没有没有输入文字,则清除按钮为隐藏状态;

Axure9|带清除按钮的文本输入框
Axure9|带清除按钮的文本输入框
第五步:选择清除按钮,设置交互,实现点击清除按钮,清除输入文本,同时隐藏清除按钮,显示“提示文本”;

  • 新建交互,单击清除按钮时,设置文本,将文本框的文本的值设置为空;在显示/隐藏中,将当前按钮设置为隐藏;
    Axure9|带清除按钮的文本输入框