表单输入框聚焦输入内容显示叉叉清除效果

处理表单的时候，经常有这种效果，当我们输入内容的时候输入框右边会动态显示一个叉叉图标，点击可以清除已输入的内容，当输入框没有输入内容时，叉叉会自己消失，当输入框焦点消失时，叉叉也会自己消失，最近刚好写了一个这样的效果，分享给大家，效果图如下所示：

一：页面html代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<div class="login"><form action="" method="post" namespace="/"><h4>用户登录</h4><ul  class="login-con"><li><i class="i-icon l-icon"></i><input class="active" type="text" name="username" placeholder="请输入您的用户名"  maxlength="16" autocomplete="off"/><i class="i-icon delete-icon"></i></li><li><i class="i-icon l-icon"></i><input class="active" type="text" name="password" onfocus="this.type='password'" placeholder="请输入您的密码"  maxlength="16" autocomplete="off"/><i class="i-icon delete-icon"></i></li></ul><p class="error-msg"></p><div class="login-btn"><a href="javascript:void(0)" onclick="">登录</a></div></form>
</div>
</body>
</html>

二：css样式代码，放在head标签里：

  <style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}.login {width: 380px;margin: 0 auto;position: relative;padding: 40px;border-radius: 4px;background-color: #fff;}.login h4{margin-bottom: 20px;font-weight: normal;font-size: 22px;color: #333;}.login .login-con li{position: relative;width: 300px;height: 50px;margin-bottom: 20px;border-radius: 4px;border: solid 1px #bfbfbf;font-size: 0;}.login .login-con li.active{border: solid 1px #66b0d9;}.login .login-con input{width: 239px;line-height: 48px;vertical-align:middle;font-size:16px;color:#333;background-color: #fff;border: none;outline: none;}input::-webkit-input-placeholder {color: #a19f9f;}input::-moz-placeholder {color: #a19f9f;}input:-ms-input-placeholder {color: #a19f9f;}.i-icon{display: inline-block;}.login .login-con li .i-icon.l-icon{margin-left: 20px;margin-right: 20px;width: 18px;height: 18px;vertical-align: middle;}.login .login-con li:nth-child(1) .i-icon.l-icon{background-image: url("image/user-icon.jpg");}.login .login-con li:nth-child(2) .i-icon.l-icon{background-image: url("image/password-icon.jpg");}.login .login-con li .i-icon.delete-icon{display: none;position: absolute;right: 20px;top:17px;width: 16px;height: 16px;vertical-align: middle;background-image: url("image/delete-icon.jpg");cursor: pointer;}.login .login-btn{margin-bottom: 30px;text-align:center;}.login .login-btn a{display:block;color:#fff;padding:13px 0;background-color: #1c9dff;border-radius: 4px;font-size: 18px;text-decoration: none;}.login .error-msg{padding-top: 20px;height: 30px;color: #f00;}</style>

三：引入jquery，并监听输入框聚焦事件，聚焦后边框高亮显示，如果输入框有输入内容，则显示叉叉图标

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(function(){/*监听输入框聚焦事件*/$("input").on("focus",function () {$(this).parent().addClass("active");if( $(this).val().length > 0){$(this).next(".delete-icon").show();}else{$(this).next(".delete-icon").hide();}}) })
</script>

四：监听输入框失去焦点事件，失去焦点去除边框高亮显示并且叉叉图标隐藏

        /*输入框失去焦点的blur事件*/$("input").on("blur",function () {var $this = $(this);$this.parent().removeClass("active");$this.next(".delete-icon").hide();});

五：监听鼠标松开事件，当输入框有输入内容就显示叉叉图标，反之则不显示

      $("input").keyup(function(){if( $(this).val().length > 0){$(this).next(".delete-icon").show();}else{$(this).next(".delete-icon").hide();}});

六：叉叉图标绑定点击删除输入框内容事件

      /*删除图标的点击事件*/$(".delete-icon").on("click",function () {$(this).prev("input").val("").focus();});

七：表单需要的事件都已经添加完了，但是我们发现当我们点击叉叉图标的时候，并不会清空输入框的内容，而是图标消失不见了，那么需要阻止浏览器默认事件,解决blur事件比click事件先执行的问题，为什么这样写可以参考上一篇文章：blur事件与click事件冲突的解决办法，里面还介绍了多种解决方案

        /*阻止浏览器默认事件,解决blur事件比click事件先执行的问题*/$(".delete-icon").on("mousedown",function(e) {e.preventDefault();})

这样就完整地实现了效果，四五六七步骤的代码都放在页面加载完即$(function(){})里。
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流

表单输入框聚焦输入内容显示叉叉清除效果相关推荐

Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...
php 表单录入,PHP 表单和用户输入
PHP 表单和用户输入介绍表单之前我们先来了解一下关于表单的基本知识点: 1.表单标签标签用于为用户输入创建 HTML 表单. 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按 ...
html手机单选框,手机移动网页制作：表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
Selenium自动化-清空输入框、输入内容、点击按钮
1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser.find_element_by_id('kw') try:#输入内容:se ...
下列关于html5表单的多样输入方式,IT兄弟连 HTML5教程 HTML5表单多样的输入类型1...
原标题:IT兄弟连 HTML5教程 HTML5表单多样的输入类型1 HTML5拥有多个新的表单输入类型,这些新特性提供了更好的输入控制和验证.并不是所有的主浏览器都支持新的input类型,不过我们可 ...
html表单左侧文字对齐,CSS图标文字对齐和表单输入框文字对齐兼容
张鑫旭的一篇文章,讲到20像素图标对齐和表单元素40像素对齐有所收获,谢谢@张鑫旭 ,很多观点跟平时的处理方式不谋而合,一般来说,我处理图标如果临近的话都会使用同样宽高,然后使用inline-bloc ...
input表单只允许输入大于0的整数
1.<input type="tel" name="num" maxlength="5" οnkeyup="carNum( ...
[html] 页面上的登录表单记住了密码（显示星号），但我又忘了密码，如何找回这个密码呢？
[html] 页面上的登录表单记住了密码(显示星号),但我又忘了密码,如何找回这个密码呢? 将密码input的type改为text或者为空,则会显示输入框值. 个人简介我是歌谣,欢迎和大家一起交流前 ...

表单输入框聚焦输入内容显示叉叉清除效果

表单输入框聚焦输入内容显示叉叉清除效果相关推荐

最新文章

热门文章