input输入框清除插件，极好用！

最新推荐文章于 2022-08-11 17:10:06 发布

herogus丶

最新推荐文章于 2022-08-11 17:10:06 发布

阅读量6.2k

点赞数 3

分类专栏： Java 文章标签：插件 html

本文链接：https://blog.csdn.net/u013176571/article/details/70568666

版权

Java 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

不BB别的了，直接上干货，很容易看懂，自己上手测试吧

clearInput.js插件代码：

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var autoClearFiled = document.querySelectorAll('.am-input-autoclear');  //重点,与“HTML中重点1”对应，获取所有class为.am-input-autoclear的元素
        if(autoClearFiled){
            Array.prototype.forEach.call(autoClearFiled, function (elem) {
                var clearTrigger = elem.querySelector('.am-icon-clear');     //重点，与“HTML中重点2”对应，获取当前的class元素,监听事件
                clearTrigger.style.visibility = 'hidden'; //隐藏 删除图标
                var clearInput = elem.querySelector('input[type="text"],input[type="password"],input[type="number"],input[type="tel"],input[type="email"],input[type="url"],input[type="search"]');
                if (clearTrigger && clearInput) {
                    clearTrigger.addEventListener('touchstart', function () {
                        clearInput.value = '';
                        clearInput.focus();
                        clearTrigger.style.visibility = 'hidden';
                    }, false);
                    clearTrigger.addEventListener('click', function () {
                        clearInput.value = '';
                        clearInput.focus();
                        clearTrigger.style.visibility = 'hidden';
                    }, false);
                    clearInput.addEventListener('focus', function () { 
                        clearTrigger.style.visibility = (clearInput.value.length > 0) ? 'visible' : 'hidden';
                    }, false);
                    clearInput.addEventListener('input', function () {  
                        clearTrigger.style.visibility = (clearInput.value.length > 0) ? 'visible' : 'hidden';
                    }, false);
                    clearInput.addEventListener('blur', function () { //失去焦点
                        setTimeout(function(){
//                          clearTrigger.style.visibility = 'hidden';
                        },200);
                    }, false);
                }
            });
        }
    }, false);
})();

html代码，用的是aui

<!DOCTYPE html>
<html ng-app="starter">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>测试</title>
		<link rel="stylesheet" type="text/css" href="../../common/css/aui.css" />
		<link rel="stylesheet" href="../../common/css/ionic.css" />
		<!--<script type="text/javascript" src="../../common/js/angular.min.js"></script>-->
		<script type="text/javascript" src="../../common/js/clearInput.js"></script>
	</head>
	<body ng-controller="OneKeyMoveCarController">
			<div class="aui-content aui-margin-t-15 ">
					<ul class="aui-list aui-form-list"> 
						<li class="aui-list-item am-input-autoclear">  <!--重点1-->
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label">
									姓名
								</div>
								<div class="aui-list-item-input common-input">
									<input type="text" placeholder="请输入您的姓名">
								</div>
								<div class="common-clear">
									<!--重点2。删除图标自己找-->
									<img class="am-icon-clear clearIcon" src="../../common/img/delete.png" />
								</div>
							</div>
						</li>
					</ul>
			</div>
	</body>

</html>

运行效果

herogus丶

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
input输入框清除插件，极好用！

不BB别的了，直接上干货，很容易看懂，自己上手测试吧clearInput.js插件代码：(function () { document.addEventListener('DOMContentLoaded', function () { var autoClearFiled = document.querySelectorAll('.am-input-autocle
复制链接

扫一扫