inputclean插件的用法

语言:javascript 是jquery插件, 目的:给文本框增加×,点击×,即可清空文本框内容. 如图: 具体交互效果: 1,当文本框聚焦时,×永久显示,不管鼠标光标在不在文本框上面(hover); 2,当文本框失去焦点时,只有鼠标hover,×才会显示,鼠标移开,×消失; 3,点击×,文本框内容被清空,且文本框自动聚焦.

整个插件不到75行,所以就直接贴代码了:

文件名:jquery.inputclean.js

/** * Created by huangweii on 2015/7/27. * 用于增加文本框的×,点击×会清空文本框的内容 */$.fn.inputclean = function (option, callback) {
         var settings = $.extend({        inputClearClass: undefined,        deviationTop: undefined/*垂直方向上的误差*/,        deviationLeft: undefined/*水平方向上的误差*/,        clickCallback: undefined/*清空文本框之后的回调事件*/,        noFocusAfterClean: undefined/* 清空文本框内容后是否聚焦 */,        parentHoverClass: 'inputParentLi'/*文本框的父元素的class,用于hover时显示×*/    }, option);    function bootstrap($that) {
             var defInputClearClass = 'inputClearBtn';//正常情况下,字体的颜色        if (settings.inputClearClass) {            defInputClearClass = settings.inputClearClass;        }        var cleanBtnTop = 11;        if (settings.deviationTop) {            cleanBtnTop = cleanBtnTop + Number(settings.deviationTop);        }        var cleanBtn = '';        var $cleanBtn = $(cleanBtn);        $that.before($cleanBtn);        $that.data('inputclean', true);//用于判断 是否有×  console.log($that.data('inputclean'))        /* 为什么要判断是否有×呢?         如果有×,则有内容时显示,无内容时不显示:         if($orgFullName.data('inputclean')){         if($orgFullName.val()){         $orgFullName.prev().show();         }else{         $orgFullName.prev().hide();         }         }         * */        if (settings.parentHoverClass) {
    //增加父元素的样式,用于父元素hover时,显示×            $parentLi = $that.parent();            if (!$parentLi.hasClass(settings.parentHoverClass)) {                $parentLi.addClass(settings.parentHoverClass);            }        }        var width_input = $that.width();        if (settings.deviationLeft) {            width_input = width_input + settings.deviationLeft;        }        console.log('width_input:' + width_input);        $cleanBtn.css('left', (width_input + 12) + 'px');        $cleanBtn.css('top', (cleanBtnTop) + 'px');        $that.css('padding-right', '20px');        $cleanBtn.click(function (e) {
                 $that.val('');            //$cleanBtn.hide();//隐藏×            if (settings.noFocusAfterClean === undefined || settings.noFocusAfterClean === false) {                console.log(settings.noFocusAfterClean);                $that.focus();            }            if (settings.clickCallback && typeof settings.clickCallback === 'function') {                settings.clickCallback(e);            }        })    }    return this.each(function () {
             var $elem = $(this);        bootstrap($elem);        if ($.isFunction(callback)) callback($elem)    })};

参数说明

参数名	含义	说明
inputClearClass	×的样式	例如 ‘inputClearBtn’
deviationTop	垂直方向上的误差	默认值为undefined,可能需要设置,特别是在父标签高度不统一时
deviationLeft	水平方向上的误差	默认值为undefined,一般不用设置
clickCallback	清空文本框之后的回调事件	比如清空文本框之后,提交按钮应该置灰
noFocusAfterClean	清空文本框内容后是否聚焦	默认值为undefined,表示聚焦
parentHoverClass	文本框的父元素的class,用于hover时显示×	.inputParentLi:hover .inputClearBtn{display:block;}

调用:

var $orgFullName = $('input[name=orgFullName]');        $orgFullName.inputclean({            deviationTop: 3        }); var $partnerCode = $('input[name=partnerCode]');        $partnerCode.inputclean({            inputClearClass: 'inputClearBtn',            deviationTop: 0,            parentHoverClass: 'inputParentLi',            clickCallback: function (e) {
                     checkPartnerTrigger();            }        }); var $invoice_title = $('input[name=invoice_title]');    $invoice_title.inputclean({        inputClearClass: 'inputClearBtn',        deviationTop: 0,        parentHoverClass: 'inputParentLi',        deviationLeft: 2    });

我使用的inputClearBtn 样式为:

.inputClearBtn {    position: absolute;    display: none;    width: 24px;    height: 25px;    background: url('http://www.static.chanjet.com/chanjet/images/appstore/delete.png?v=1437103227783') no-repeat;    cursor: pointer;}

显示效果:

参考: