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

来源：互联网发布：imdb评分靠谱吗知乎编辑：程序博客网时间：2024/05/29 21:19

不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>

运行效果

1 0