CSS实现文本框输入内容后显示清除按钮

2021-11-4 小微发布 技术日志 浏览(2311)

input框旁边的清空input按钮,我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴:

3003.jpg

我们要实现的功能是,在输入的时候,右侧的清空按钮显示出来,然后当删除input中的内容的时候,清空按钮也消失。

以前实现的时候,我用的是“keyup”事件。某一次在做触屏版的时候,不知怎么搞的就是触发不了事件,于是像一位牛人请教,get到了这个新技能:

首先看下这个布局的HTML:

<div class="input-box"> <input required="required" type="text" class="name-input" placeholder="请输入昵称" /> <a href="javascript:;" class="clear-input"> <img src="images/icon-clear.png" class="clear-input-img" alt="" /> </a> </div>

实现这个功能很简单,出去基本的样式之外,再加上这样的样式就OK啦:

.name-input:valid + .clear-input {display: block;}

来解读一下~~

在Input后面放个清除的按钮;

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式(这里要记得在input里面加上required="required",表示必须);

 +号的意思是input后面那个css样式名;

“clear-input”要先隐藏,这个隐藏不要写在行内。

这句话的意思就是:当name-input框内有文字的时候,clear-inout就要显示出来。

 
然后用js设置点击事件,清空input文本框。$('.name-input').val("");

标签: css样式 

免费电子图册系统