255
Views
11
Comments
Solved
[Input Mask React] Currency mask has pre defined placeholder as 0
inputmask-react
Reactive icon
Forge asset by João Barata
Application Type
Reactive

Hello,

I'm using this plugin for masking a currency input. In that input everytime I focus it the placeholder is replaced automatically by a 0 and everytime that input is empty the 0 is shown. I want to show my placeholder instead. 

I also checked previous questions and I see that someone advised to check the source code, but I guess the code was changed since I checked the lines mentioned in that answer and they do not match with the script I have in my environment. 

Thanks  

2020-11-25 10-45-32
Mostafa Othman
Champion
Solution

Hello Antonio,

I did some changes for javascript file "inputmask_min" of InputMask React. 

I commented functions "focusEvent" and "mouseenterEvent"

Kindly find JS file attached so try to copy content of attached file and replace content of existing file into InputMask React

inputmask_min.js
UserImage.jpg
Antonio Cordeiro

Thank you so much Mostafa, it solved the problem perfectly. 

Wish you the best

Note: For those who use this file in the future and want the text aligned to the left just search in for  e.style.textAlign="right" and change it to "left".

UserImage.jpg
Antonio Cordeiro

One more thing, when you write a 0 you can't  delete it and it is persistent unless you write another number on top of that 0. Do you know why it happens? I was searching it all day and I haven't found a solution yet.

2020-11-25 10-45-32
Mostafa Othman
Champion
Solution

Hello Antonio

If you write 0 it will deal with it like any value but when u delete it and go outside textbox it will show your placeholder again.


If you can explain me more about scenario that you want to achieve it may help me understand more.

UserImage.jpg
Antonio Cordeiro

Basically, if the input value is 0 and you press the backspace button to delete it the 0 is never deleted. Only if you writte any other number on top of it that will replace the 0 by that number and only then you can delete the value and show the placeholder.

inputMaskReact0.JPG
2024-01-15 13-02-19
Vaibhavi Paranjpe

Hi @Mostafa Othman ,  I am using Input Currency Mask and it is allowing user to enter minus(-) sign but it should only allow user to enter numbers and decimals do you know what change should I make in inputmin.js script of the input currency mask to make this work. 

2020-11-25 10-45-32
Mostafa Othman
Champion

Hi Vaibhavi,

Kindly find attached Javascript file, you can copy javascript code from this file and replace Javascript into file "inputmask_min" into "InputMaskReact" module

 

2020-11-25 10-45-32
Mostafa Othman
Champion

Hi Vaibhavi,

Kindly find attached Javascript file, you can copy javascript code from this file and replace Javascript into file "inputmask_min" into "InputMaskReact" module

 

InputMaskWithoutMinus.txt
2020-11-25 10-45-32
Mostafa Othman
Champion
Solution

Hello Antonio

If you write 0 it will deal with it like any value but when u delete it and go outside textbox it will show your placeholder again.


If you can explain me more about scenario that you want to achieve it may help me understand more.

2020-11-25 10-45-32
Mostafa Othman
Champion
Solution

Hello Antonio,

I did some changes for javascript file "inputmask_min" of InputMask React. 

I commented functions "focusEvent" and "mouseenterEvent"

Kindly find JS file attached so try to copy content of attached file and replace content of existing file into InputMask React

inputmask_min.js
UserImage.jpg
Antonio Cordeiro

Thank you so much Mostafa, it solved the problem perfectly. 

Wish you the best

Note: For those who use this file in the future and want the text aligned to the left just search in for  e.style.textAlign="right" and change it to "left".

UserImage.jpg
Antonio Cordeiro

One more thing, when you write a 0 you can't  delete it and it is persistent unless you write another number on top of that 0. Do you know why it happens? I was searching it all day and I haven't found a solution yet.

2020-11-25 10-45-32
Mostafa Othman
Champion
Solution

Hello Antonio

If you write 0 it will deal with it like any value but when u delete it and go outside textbox it will show your placeholder again.


If you can explain me more about scenario that you want to achieve it may help me understand more.

UserImage.jpg
Antonio Cordeiro

Basically, if the input value is 0 and you press the backspace button to delete it the 0 is never deleted. Only if you writte any other number on top of it that will replace the 0 by that number and only then you can delete the value and show the placeholder.

inputMaskReact0.JPG
2024-01-15 13-02-19
Vaibhavi Paranjpe

Hi @Mostafa Othman ,  I am using Input Currency Mask and it is allowing user to enter minus(-) sign but it should only allow user to enter numbers and decimals do you know what change should I make in inputmin.js script of the input currency mask to make this work. 

2020-11-25 10-45-32
Mostafa Othman
Champion

Hi Vaibhavi,

Kindly find attached Javascript file, you can copy javascript code from this file and replace Javascript into file "inputmask_min" into "InputMaskReact" module

 

2020-11-25 10-45-32
Mostafa Othman
Champion

Hi Vaibhavi,

Kindly find attached Javascript file, you can copy javascript code from this file and replace Javascript into file "inputmask_min" into "InputMaskReact" module

 

InputMaskWithoutMinus.txt
2022-10-18 07-32-49
Randall Jodache Chetty

Thanks for sharing 


UserImage.jpg
Nicolas da Silva

I have applied a change to the placeholder value from the i.default.extendAliases({numeric:{  from "0" to "" (There is no longer the issue of having to forcefully click outside the input box to view an empty input), hopefully this should help solve your issue.


Attached is the modified JS file (In .tst format), including Mostafa Othman solution


Best regards,


Nicolas da Silva

inputmask_min.txt
2024-01-15 13-02-19
Vaibhavi Paranjpe

Hi @Mostafa Othman , thank you so much for the solution

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.