CODEWITHSUNDEEP
jqueryclient-sideinput-mask
Kevin
Kevin

Reputation: 2802

Robin Herbots inputmask, how to always show the mask?

I'm using Robin Herbot's jquery inputmask to handle some DateTime stuff in my app.

I want to always show the mask, which you can do by setting clearMaskOnLostFocus property to false

$.extend($.inputmask.defaults, {
    'clearMaskOnLostFocus': false
});

This works great if your input is coming directly from the user pressing the keyboard. The mask will still show when it's empty. My problem is getting it to show an empty mask when the value of the textbox is programatically set to an empty string.

$('#id').val(''); //this will remove the mask until hover or focus

I wanted to ask before I begin modifying the plugin, hopefully I am just missing something.

Here is a fiddle to demonstrate

Upvotes: 1

Views: 3979

Answers (1)

Kevin
Kevin

Reputation: 2802

I ended up modifying the internal fn.val function so that if an element was cleared programatically, it would set the value to an empty mask.

$('#id').val(''); //this will set the value to an empty mask, ie __/__/____

//changes were made to this function
    $.fn.val = function ()
    {
        if (arguments.length == 0)
        {
            var $self = $(this);
            if ($self.data('_inputmask'))
            {
                if ($self.data('_inputmask')['opts'].autoUnmask)
                    return $self.inputmask('unmaskedvalue');
                else
                {
                    var result = $.inputmask.val.apply($self);
                    var inputData = $(this).data('_inputmask'), masksets = inputData['masksets'],
                        activeMasksetIndex = inputData['activeMasksetIndex'];
                    return result != masksets[activeMasksetIndex]['_buffer'].join('') ? result : '';
                }
            } else return $.inputmask.val.apply($self);
        } else
        {
            var args = arguments;
            //if there are args, and they are undefined, null or empty then use the native .val function
            if (args.length > 0 && isNullOrEmpty(args[0]))
            {
                return $.inputmask.val.apply($(this));
            }
            else
            {
                return this.each(function ()
                {
                    var $self = $(this);
                    var result = $.inputmask.val.apply($self, args);
                    if ($self.data('_inputmask'))
                        $self.triggerHandler('setvalue.inputmask');
                    return result;
                });
            }
        }

Upvotes: 1

Related Questions