Inputmask: Original placeholder disappear when mouseout in IE

Created on 26 Dec 2018  路  5Comments  路  Source: RobinHerbots/Inputmask

When you have somethink like this:

<input type="text" name="phone" id="phone" value="" placeholder="Phone number" />

$('input[name="phone"]').inputmask({mask:"9{1,5}[(,9{1,2})|(.9{1,2})]",showMaskOnHover: false, showMaskOnFocus: false});

You see field with placeholder: Phone number.
When you click on field, placeholder still is there.
When you start typing, placeholder disappear and inputmask block characters by mask.
This is ok.

BUT.
Start from beginning.
You see field with placeholder: Phone number.
When you mouseover on field (DONT CLICK) and mouseout, placeholder desapear.

inpustmask fire event named: mouseleaveEvent.

This event do this bug.

When i change this code:

            mouseleaveEvent: function mouseleaveEvent(e) {
                var input = this;
                mouseEnter = !1, opts.clearMaskOnLostFocus && document.activeElement !== this && HandleNativePlaceholder(this, originalPlaceholder);
            },

to this:

            mouseleaveEvent: function mouseleaveEvent(e) {
                return;
            },

everiting is ok. But this is only temporary fix. When i update your class, bug returns.

Most helpful comment

I was going to place a new issue and saw this one with the same error, this is just a better explanation, with examples, of the same issue.

Describe the bug
On the mouseLeave event of masked input with placeholder, in IE, the placeholder is replaced with the empty mask.

To Reproduce

  1. Must be using IE
  2. Create input with placeholder attribute
  3. Apply mask in input, ex:
    { alias: "datetime", inputFormat: "HH:MM", placeholder: "_", showMaskOnHover: false }
  4. Hover and Leave the input

Expected behavior
Keep the placeholder, the same as happens in others browsers.

Live example
Access with IE
https://jsbin.com/qufivom/edit?html,js,output

Desktop:

  • Browser: IE
  • Version: 11.472

Additional context
The problems comes from the issue #1965 that created the function HandleNativePlaceholder. You can even reproduce the error in chrome if you set the ie flag to true.

All 5 comments

I was going to place a new issue and saw this one with the same error, this is just a better explanation, with examples, of the same issue.

Describe the bug
On the mouseLeave event of masked input with placeholder, in IE, the placeholder is replaced with the empty mask.

To Reproduce

  1. Must be using IE
  2. Create input with placeholder attribute
  3. Apply mask in input, ex:
    { alias: "datetime", inputFormat: "HH:MM", placeholder: "_", showMaskOnHover: false }
  4. Hover and Leave the input

Expected behavior
Keep the placeholder, the same as happens in others browsers.

Live example
Access with IE
https://jsbin.com/qufivom/edit?html,js,output

Desktop:

  • Browser: IE
  • Version: 11.472

Additional context
The problems comes from the issue #1965 that created the function HandleNativePlaceholder. You can even reproduce the error in chrome if you set the ie flag to true.

@blaskognia n @lucaspoffo ,

Can you have a try with version 5.0.0-beta.93.
If it is ok I will backport it to version 4.x

@RobinHerbots
It's working now,
Thanks :)

Hello @RobinHerbots ,
Same problem accures in Chrome Browser - Version 71.0.3578.98 (Official Build) (64-bit)
I am waiting your updates.
Workaround solution.

$(".exSel").on("click", function(e) { $(e.currentTarget).attr("placeholder", " "); }) $(".exSel").on("blur", function(e) { $(e.currentTarget).attr("placeholder", " "); })

@egemenozkan,

With which version of the inputmask did you test?

Was this page helpful?
0 / 5 - 0 ratings