带清除按钮的输入框

对于输入框内容的清除功能实现, 一种是忽略, 由用户一直手动操作; 另一种是在输入框旁边摆一个按钮, 点击按钮来实现清除操作. 但是, 添加额外的

清除按钮导致页面不美观, 并且降低开发体验... 所以有没有考虑使用插件, 在输入框右边动态显示清除按钮, 提供默认的清除工作, 并且支持自定义清除方法呢?

以下是一个jQuery插件的实现:

效果图:

测试页面:

test.html

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4  
 5  <link type="text/css" rel="stylesheet" href="JQueryClsBtn.css" />
 6  <script type="text/javascript" src="jquery.js"></script>
 7  <script type="text/javascript" src="JQueryClsBtn.js"></script>
 8  <script type="text/javascript" language="javascript">
 9 
10     // Apply the ClsButton code to the appropriate INPUT elements:    
11     $(function(){
12 
13         $("INPUT.cls-button").ClsButton({
14             clsFn: function(p){
15                 p.value = '';
16             }
17         });
18 
19     });
20  </script>
21 <title>Insert title here</title>
22 </head>
23 <body>
24      <input type="text"  class="cls-button" maxlength="22" value="带清除按钮的输入框"/>
25 </body>
26 </html>

JQueryClsBtn.css

 1 INPUT.cls-button {    
 2     background-repeat:no-repeat;
 3     background-image:url(cls-button.png);
 4     background-position:200% 0%;
 5     padding-right:20px;    
 6 }
 7 INPUT.cls-button.show{ /* 显示按钮 */
 8     background-position:100% 0%;
 9 }
10 INPUT.cls-button.hide{ /* 隐藏按钮 */
11     background-position:200% 0%;
12 }
13 INPUT.cls-button.focus{ /* 获取焦点 */
14     cursor: pointer;
15 }

JQueryClsBtn.js

  1 $.fn.ClsButton = function(cfg){
  2     
  3     return this.each(function(){
  4         
  5         // 默认点击按钮操作
  6         var defaultClsFn = function(p){
  7             $(p).val('');
  8         }
  9         
 10         this.clsCfg = {
 11             clsFn:cfg && cfg.clsFn ? cfg.clsFn : defaultClsFn,
 12             showClass: cfg && cfg.showClass ? cfg.showClass : 'show',
 13             hideClass: cfg && cfg.hideClass ? cfg.hideClass : 'hide',
 14             focusClass: cfg && cfg.focusClass ? cfg.focusClass : 'focus', /* 按钮获取焦点时配置 */
 15             _btn_width: 16,
 16             _btn_height: 16,
 17             _btn_focus: false, /* 按钮是否获取焦点 */
 18             _not_empty: false /* 输入框是否为空 */
 19         }
 20         
 21         /* 按钮初始化状态 */
 22         if(this.value){
 23             this.clsCfg._not_empty = true;
 24             $(this).removeClass(this.clsCfg.hideClass).addClass(this.clsCfg.showClass);
 25         }else{
 26             $(this).removeClass(this.clsCfg.showClass).addClass(this.clsCfg.hideClass);
 27         }
 28         
 29         $(this)
 30         .addClass(cfg && cfg.clsClass ? cfg.clsClass : 'cls-button')
 31         
 32         .mousemove(function(e){
 33             
 34             if(this.clsCfg._not_empty){
 35                 
 36                 var x = e.pageX || e.x;
 37                 var y = e.pageY || e.y;
 38                 var el = e.target || e.srcElement;
 39                 var btn_focus = (x > coord(el,'offsetLeft') + el.offsetWidth - this.clsCfg._btn_width)
 40                 && (y < coord(el,'offsetTop') + this.clsCfg._btn_height);
 41                 
 42                 if(btn_focus){
 43                     if(!this.clsCfg._btn_focus){                 
 44                         $(this).addClass(this.clsCfg.focusClass); /* 按钮获取焦点 */
 45                         this.clsCfg._btn_focus = true;
 46                     }
 47                 }else{
 48                     if(this.clsCfg._btn_focus){
 49                         this.clsCfg._btn_focus = false;
 50                         $(this).removeClass(this.clsCfg.focusClass); /* 按钮失去焦点 */
 51                     }
 52                 }
 53             }
 54         })
 55         
 56         .mouseout(function(){
 57             if(this.clsCfg._not_empty){
 58                 this.clsCfg._btn_focus = false;
 59                 
 60                 $(this).removeClass(this.clsCfg.focusClass);
 61             }
 62         })
 63         
 64         .mousedown(function(e){
 65             if(this.clsCfg._btn_focus){
 66                 this.clsCfg._btn_focus = false;
 67                 
 68                 $(this).removeClass(this.clsCfg.focusClass);
 69                 this.clsCfg.clsFn(this);
 70                 
 71                 if(!$.browser.msie){ /* 此时,非IE浏览器不会触发input事件 */
 72                     this.clsCfg._not_empty = false;
 73                     $(this).removeClass(this.clsCfg.showClass).addClass(this.clsCfg.hideClass);
 74                 }
 75             }
 76             return true;
 77         })
 78         
 79         function valueCheck(p){
 80             
 81             var el = p.value != undefined ? p: (p.target || p.srcElement);
 82             
 83             if(!el.clsCfg._not_empty && el.value){ /* 输入框变为非空 */
 84                 el.clsCfg._not_empty = true;
 85                 $(el).removeClass(el.clsCfg.hideClass).addClass(el.clsCfg.showClass);
 86             }else if(el.clsCfg._not_empty && !el.value){ /* 输入框变为空 */
 87                 el.clsCfg._not_empty = false;
 88                 $(el).removeClass(el.clsCfg.showClass).addClass(el.clsCfg.hideClass);
 89             }
 90         }
 91         
 92         if($.browser.msie){
 93             
 94             var version = $.browser.version; // 8.0 9.0 ...
 95             if(version == undefined){                
 96                 version=navigator.appVersion.split(";")[1].replace(/[ ]/g,""); // MSIE8.0 MSIE9.0 ...
 97             }
 98             if(version.indexOf('8.0') != -1 || version.indexOf('9.0') != -1){
 99                 
100                 var el = this;
101                 window.setInterval(function() {  /* 用定时器弥补IE8/IE9下onpropertychange的bug  */
102                     
103                     if (!el.clsCfg._not_empty && el.value) { /* 输入框变为非空 */
104                         el.clsCfg._not_empty = true;
105                         $(el).removeClass(el.clsCfg.hideClass).addClass(el.clsCfg.showClass);
106                     } else if (el.clsCfg._not_empty && !el.value) { /* 输入框变为空 */
107                         el.clsCfg._not_empty = false;
108                         $(el).removeClass(el.clsCfg.showClass).addClass(el.clsCfg.hideClass);
109                     }
110                 },500);
111             }else{
112                 this.attachEvent('onpropertychange', valueCheck);
113             }
114             
115         }else{
116             
117             this.addEventListener('input', valueCheck, false);
118         }
119         
120     });
121     
122     function coord(el,prop) {
123         var c = el[prop], b = document.body;
124         
125         while ((el = el.offsetParent) && (el != b)) {
126             if (!$.browser.msie || (el.currentStyle.position != 'relative'))
127                 c += el[prop];
128         }
129         
130         return c;
131     }
132 }

cls-button.png

参考:

input输入值的即时监听 : http://bbs.blueidea.com/thread-2966314-1-1.html

input事件大全: http://hi.baidu.com/jdcct/item/dfcfaf20b518ac41479962c2

IE8,9下使用onpropertychange事件的问题: http://blog.icaigen.com/ie9-bug-onpropertychange.html

一个增减输入框的实现源码下载地址: http://dldx.csdn.net/fd.php?i=499641558379017&s=8ae9a0861073cb170f266fc0a627a540

站在巨人的肩膀上

posted @ 2012-10-31 21:39 bluephaethon 阅读(2961) 评论(0) 收藏举报

刷新页面返回顶部

带清除按钮的输入框

公告