inputclean插件的使用方法

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 = '<i  class="' + defInputClearClass + '"></i>';
        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	清空文本框之后的回调事件	比方清空文本框之后,提交button应该置灰
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;
}

显示效果:



參考:placeholder插件的使用