jquery.ibanFormat.js

/*
 * Simple IBAN Format-Plugin
 * Easily format IBAN for display use. Replace IBAN inline in a document, or return a formatted IBAN for other uses.
 * Created based on the idea of https://github.com/customd/jquery-number
 */

(function ($) {
    // jQuery plugin definition

    "use strict";

    $.fn.ibanFormat = function (iban) {

        if (typeof iban === 'undefined') {
            if (this.is('input:text')) {
                return this.on('input paste', function (event) {
                    var target = event.target,
                    position = target.selectionEnd,
                    length = target.value.length,
                    val = null;

                    if (event.type == 'paste' || event.originalEvent.inputType == "insertFromPaste") {
                        // Get the text content stream.
                        if (window.clipboardData && window.clipboardData.getData) { // IE
                            val = window.clipboardData.getData('Text');
                        } else if (event.originalEvent.clipboardData && event.originalEvent.clipboardData.getData) {
                            val = event.originalEvent.clipboardData.getData('text/plain');
                        }
                        val = val.replace(/\s+|-/gm, '');

                        // Do the reformat operation.
                        $(target).val(val);

                        // Stop the actual content from being pasted.
                        event.preventDefault();
                        return false;
                    }
                    target.value = $.ibanFormat(target.value);
                    target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
                })
                .each(function () {
                    var $this = $(this).data('ibanFormat', true);
                    if (this.value === '')
                        return;

                    // Otherwise... format!!
                    $this.val($this.val());
                });

                this.value = $.ibanFormat(this.value);
            };
        }
        // Add this iban to the element as text.
        return this.text($.ibanFormat.apply(window, arguments));
    };

    // We check if any hooks already exist, and cache
    // them in case we need to re-use them later on.
    var origHookGet = null,
    origHookSet = null;

    // Check if a text valHook already exists.
    if ($.isPlainObject($.valHooks.text)) {
        // Preserve the original valhook function
        // we'll call this for values we're not
        // explicitly handling.
        if ($.isFunction($.valHooks.text.get))
            origHookGet = $.valHooks.text.get;
        if ($.isFunction($.valHooks.text.set))
            origHookSet = $.valHooks.text.set;
    } else {
        // Define an object for the new valhook.
        $.valHooks.text = {};
    }

    $.valHooks.text.get = function (el) {
        var $this = $(el),
        data = $this.data("ibanFormat");

        if (!data) {
            if ($.isFunction(origHookGet))
                return origHookGet(el);
            else
                return undefined;

        } else {
            if (el.value === '')
                return '';

            return el.value.replace(/\s+|-/gm, '');
        }
    };

    $.valHooks.text.set = function (el, val) {
        var $this = $(el),
        data = $this.data("ibanFormat"),
        iban;

        if (!data) {
            if ($.isFunction(origHookSet))
                return origHookSet(el, val);
            else
                return ((el.value !== val) ? el.value = val : undefined);
        } else {
            iban = $.ibanFormat(val);

            return $.isFunction(origHookSet) ? origHookSet(el, iban) : el.value = iban;
        }
    };

    $.ibanFormat = function (iban) {
        return iban.replace(/[^\da-zA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim().toUpperCase();
    }
})(jQuery);