Textbox Clear Plugin

by 2Yootz

HTML

<label for="txtSearch" class="offpage">Search Keywords</label>
<input type="text" id="txtSearch" placeholder="Search..." />
<div>dfdfdfdf</div>

CSS

#txtSearch {
    font-size:14px;
}
.offpage {
    position:absolute;
    left:-5000px;
}
.rb-wrap {
    vertical-align: top;
    display: inline-block;
    position: relative;
}
.rb-input {
    padding: 5px 18px 5px 5px;
}
/* IE adds a clear icon to their textboxes by default */
 .rb-input::-ms-clear {
    display: none;
}
.rb-reset {
    background: url('http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/img/clear.png') center center no-repeat;
    display: block;
    width: 13px;
    height: 13px;
    position: absolute;
    opacity: 0.6;
    z-index: 100;
    top: 50%;
    right: 6px;
    margin-top: -6px;
}
.rb-reset:hover {
    opacity: 1;
}

JavaScript

$.fn.resetBox = function (options) {
    var textbox = $(this).addClass('rb-input');
    var wrapper = $('<div/>').addClass('rb-wrap');
    var reset = $('<div/>').addClass('rb-reset');


    textbox.wrap(wrapper);
    reset.insertAfter(textbox);


    var confDisabled = {
        enabled: false,
        message: "Reset?"
    };
    var confEnabled = $.extend({}, confDisabled, {
        enabled: true
    });

    var settings = $.extend({
        // These are the defaults.
        onReset: function () {},
        confirmation: confDisabled,
        onSubmit: function () {},
        useEscapeKey: true,
        hideResetIcon: false,
        tooltip: "Click to Reset",
    }, options);

    //handling confirmation 
    var propCnt = 0;
    for (var key in settings.confirmation) {
        if (key in confDisabled) {
            propCnt++;
        }
    }
    if ((settings.confirmation === true) || (propCnt > 0)) {
        settings.confirmation = $.extend({}, confEnabled, settings.confirmation);
    } else {
        settings.confirmation = confDisabled;
    }

    //alert(settings.confirmation.enabled);
    //alert(settings.confirmation.message);

    reset.attr("title", settings.tooltip);


    function hideShowIcon() {
        if (!settings.hideResetIcon) {
            if (textbox.val().length > 0) {
                reset.show();
            } else {
                reset.hide();
            }
        }
    }

    function resetEvent() {
        if (settings.confirmation.enabled) {
            if (confirm(settings.confirmation.message)) {
                reset.hide();
                textbox.val('');
                settings.onReset();
            }
        } else {
            reset.hide();
            textbox.val('');
            settings.onReset();
        }
    }

    //Hide-show icon
    hideShowIcon();
    textbox.keyup(hideShowIcon);


    $(document).on("paste", function () {
        window.setTimeout(function () {
            hideShowIcon();
        }, 5);
  ...