grey text remains when clearing input, until focus moved to another element

[khepf]

Any input field I have input mask on, whenever I clear the data, there is grey text that remains until the focus moves to somewhere else, in which case it clears.

Is there a way to have this grey text not appear at all, and just have a blank input when clearing it?

I noticed when inspecting the DOM that there is an attribute called im-insert with a value set to true. When I manually set it to false in the DOM, this grey text disappears. But I am unable to set it in the html itself.

Here is the html input element I am referring to (I am using knockout.js if that is relevant): <input type="text" class="form-control" name="testInput" id="testInput" data-bind="inputmask: {value: testInput, regex: '[0-9a-zA-Z- ]{0,49}' }" im-insert="true">

Thank you.

[RobinHerbots]

@khepf,

In which browser does this occur? Can you reproduce this in a codepen? Which options do you use on the inputmask? Do you also load the inputmask.css?

The im-insert is set as an indicator wheter the insertmode is insert or overwrite.

[khepf]

Figured it out.

Just added

.no-placeholder::placeholder {
    color: white;
}

to my css and it went away. Perhaps a conflict with bootstrap css, not sure.

Thanks for the help here and thank you for the inputmask.

[khepf]

I'm going to open this one again, as the issue isn't really resolved, more like a workaround. I am curious as to what the underlying cause is. Here is the ko side:

koExtensions = function(completed) {
    ko.bindingHandlers.inputmask = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var mask = valueAccessor();
            var observable = mask.value;
            if (ko.isObservable(observable)) {
                $(element).on('focusout change propertychange keyup input cut paste', function () {                    
                    if ($(element).inputmask('isComplete')) {
                        observable($(element).val());
                    } else {
                        observable(null);
                    }
                });
            }

            $(element).inputmask(mask);

        },
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var mask = valueAccessor();
            var observable = mask.value;
            if (ko.isObservable(observable)) {
                var valuetoWrite = observable();
                $(element).val(valuetoWrite);
            }
        }
    };
    completed();
};

Adding inputmask css file didn't work. This issue is in all major browsers.

[RobinHerbots]

Can this be replicated in a codepen?

[RobinHerbots]

Which version of bootstrap are you using?

[khepf]

I am using Bootstrap v4.0.0. When I setup a codesandbox with inputmask, jquery, knockout, and the ko extensions in a script tag, I am unable to get the regex rules to work properly with the above input, so I have so far been unable to test in a neural environment.

I was leaning more toward an issue with my jquery not firing until focusout, instead of input change. Do you think this could be a bootstrap compatibility issue?

[RobinHerbots]

@khepf ,

Can you try by adding an input with an empty placeholder in the html code, without inputmask.

[khepf]

Doing so, works without producing the issue. Actually, just an inputmask works just fine too. It's only when using regex, that produces the grey placeholder text that doesn't disappear until a focus change.

[RobinHerbots]

When you add an input and apply the mask with the regex but without KO. Does that change anything?

[RobinHerbots]

Can you create a codepen (even not working), so that there is something I can try with. Especially include the css

[khepf]

I have created a codepen with the input I am testing with, knockout, jquery, inputmask, and bootstrap 4.0.0 installed as dependencies.

[khepf]

I also just added my custom css for the entire page, although I am not sure it is relevant here.

[RobinHerbots]

@khepf ,

Just tweaked the codesandbox some.

https://codesandbox.io/s/04ov6l41pw

[khepf]

I swapped out those input changes and it does fix the gray text issue. But none of the regex works. For example, I am able to type ! @ # . Also, the character limit is not enforced. (in the sandbox and in my environment)

[RobinHerbots]

@khepf ,

I just updated the https://codesandbox.io/s/ljqy0zl4m

When using the data-inputmask the json needs tobe strict. You also need to single quote the property names.

Now the regexes work.