787
Views
4
Comments
Solved
Number Input field
Application Type
Mobile, Reactive

Hi all,

I have an input field having type number with a long integer type variable, I need to hide the integers with dots(like a password). so that it can take only numbers with the input field(open keyboard as number for mobile).

I tried changing the attribute type to password still it's taking every type, including text. 

Is there any way to solve this problem?(no issues using Js or css) 


thanks in advance,


image.png
2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

Hi Rashid, you can start by adding these attributes:

 

however not all browsers support pattern yet so you'll need some javascript. where inputid is the id of your input and password is the variable assigned to that input

I've assigned this action to the onChange and onkeyup events (for some reason above my knowledge I need to trigger it at these two points to avoid some letters from still sneaky through in either the variable, or the input. Would love to hear why that is happening, but this works)

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP
Solution

Hi Rashid,

You should google a bit to find a solution. One of the things I found with a quick google is this:

input[type=number] {
    -webkit-text-security: disc;
}
2018-10-18 08-34-00
Eric Bulters
 
MVP
Solution

Hi Rashid, you can start by adding these attributes:

 

however not all browsers support pattern yet so you'll need some javascript. where inputid is the id of your input and password is the variable assigned to that input

I've assigned this action to the onChange and onkeyup events (for some reason above my knowledge I need to trigger it at these two points to avoid some letters from still sneaky through in either the variable, or the input. Would love to hear why that is happening, but this works)

2023-05-27 21-38-49
Rashid

Hi 

Kilian Hekhuis & Eric Bulters

Both the solutions are quite good. I appreciate your quick replies. I used the style using webkit and it worked as expected👍


thank you

2018-10-18 08-34-00
Eric Bulters
 
MVP

Glad to help :)
just as a sidenote, the webkit style won't work in firefox, firefox-android (and IE but IE is dead) so make sure to check your users are not using those

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