RobinHerbots/Inputmask

Unable to replace deleted characters to the right of the decimal point with placeholder character.

andrew-esdc opened this issue · 10 comments

I have a currency input mask with a space for a placeholder instead of a zero.
I want the mask to replace deleted characters on the right of the decimal point with my placeholder rather than zero.
I find that if I set digitsOptional: true the deleted characters are replaced by my placeholder as I want, however the decimal place no longer shows in the mask.
I'm wondering if there is any way to have the deleted characters be replaced with my placeholder, while maintaining the decimal point in the mask.
I can't seem to find a combination of inputmask settings that will make it behave the way I want.
Thank you!

JSFiddle: https://jsfiddle.net/7yrnh13u/12/

Inputmask Version: 5.0.9-beta.50
OS: Windows 10 Enterprise Version 22H2
OS Build # 19045.4529

  • Browser: Edge Version 126.0.2592.81

You can achieve this by using the regex option like this:

$(function() {
  $('#myInput').inputmask('',
  {
      prefix: "$ ",
      rightAlign: false,
      clearMaskOnLostFocus: false,
      placeholder: "",
      regex: '[0-9]+((\\.)?[0-9]*)'
  });
});

Not quite. This still replaces the deleted characters with 0, not with my placeholder, which is a blank space.

Not quite. This still replaces the deleted characters with 0, not with my placeholder, which is a blank space.

Notice my Inputmask alias is empty, not set to currency like yours.

Hmm, yes but when I try your suggestion without the currency, I don't get the prefix or the decimal point showing.

I appreciate your advice. Basically I need the mask to show the $ prefix, show the decimal point, but also replace deleted chars with a blank space.

I appreciate your advice. Basically I need the mask to show the $ prefix, show the decimal point, but also replace deleted chars with a blank space.

Here you go. This will add the prefix and makes the decimal point and everything after it optional:


$(function() {
  $('#myInput').inputmask('',
  {
      prefix: "$ ",
      rightAlign: false,
      clearMaskOnLostFocus: false,
      placeholder: "",
      regex: '\\$ [0-9]+((\\.)?[0-9]*)'
  });
});

Thanks, this is very close to what I need, except that I need the decimal place itself to be non-optional. I will mess around with it from here.

Thanks, this is very close to what I need, except that I need the decimal place itself to be non-optional. I will mess around with it from here.

To make it non-optional, set the regex option to regex: '\\$ [0-9]+\\.([0-9]*)'.

Incredible. You're a hero. Thanks a lot!

So this has allowed me to get things working. Much appreciation.

I will leave the issue open for now because I think that the fact that the currency mask is using the placeholder on delete on the left of the decimal place but not using the placeholder on delete on the right side of the decimal is a bug.