cancel
Showing results for 
Search instead for 
Did you mean: 

Make a "Number" input type to accept "alpha numeric" values

former_member187439
Active Participant
0 Kudos

Requirement: The input field should open the "number" key pad on touch/tap in the iPad. But at the same time , the field should accept "characters" or "special chars" typed after typing the number. This is not working if we use input type "number" in our xml view. The value is getting captured as null if user types in characters after the numbers. Any workarounds to achieve alpha numeric entries in "number" type inputs?

View Entire Topic
Private_Member_15166
Active Contributor
0 Kudos
santhu_gowdaz
Active Contributor
0 Kudos

The above example will validate only text so if you want validation for alphanumaric then change regular expression to this,

var regex = /^[A-Za-z0-9]+$/;

And see this link,

http://stackoverflow.com/questions/19619428/html5-form-validation-pattern-alpha-numeric-with-spaces

former_member182862
Active Contributor
0 Kudos

I may have misread the requirement. I thought it is a number and then any alphanumeric char

http://jsbin.com/totaxun/edit?js,output

former_member187439
Active Participant
0 Kudos

Hi Dennis, This looks fine (am yet to try it on a touch device) but its not accepting "space" or other special characters after the number.My requirement is, in an address field, user should see the number pad first, after typing the number, user should be able to use a "space" or "comma" (or any special character) followed by the characters/alphabets.

former_member182862
Active Contributor
former_member187439
Active Participant
0 Kudos

hmm.. I am wondering what if the address contains "-" or " ' ". Cant we just allow all special chars instead of specifying the required ones in the code?

former_member182862
Active Contributor
0 Kudos

it all depends on your requirement

JS Bin - Collaborative JavaScript Debugging

you can allow all characters after a numeric char too

Thanks

-D

Qualiture
Active Contributor
0 Kudos

I would advise to learn some RegExp, will help you with your requirement  http://www.w3schools.com/jsref/jsref_obj_regexp.asp

former_member187439
Active Participant
0 Kudos

Unfortunately just regular expressions did not solve the requirement. The Fiori framework is not accepting the "characters" typed in an input field of type "Number". It takes the value as "null".

former_member187439
Active Participant
0 Kudos

Hi Dennis, my requirement is that the numeric keyboard should popup first in iPad. This is achievable only by having the input type as "Number"! Unfortunately this does not accept the characters typed by user. That is, even when characters are shown in the screen, its not carried forward as valid entries to the next step.

former_member182862
Active Contributor
0 Kudos

Sorry, you have to create your own custom control. or maybe other experts can help you.

Or maybe you shall also try something out after looking at the source code of sap.m.Input.

Thanks

-D

agentry_src
Active Contributor
0 Kudos

How about two separate adjacent fields?

Regards, Mike

SAP Technology RIG

former_member182862
Active Contributor
0 Kudos

Actually, I am thinking of having the initial type as Number and then once a number is entered, we dynamically change the type to Text.

In this manner, the number pad in mobile devices will show up.

Just thinking out loud.

Thanks

-D

former_member187439
Active Participant
0 Kudos

That might be a good workaround if this is not achievable.

former_member187439
Active Participant
0 Kudos

I already tried that Dennis. This was the initial requirement. Once user types "space" the text keyboard should popup in the ipad. The issue here is, when the type of the field is "number", when I write a condition to check whether user entered a "space" or any "char/special char", the condition fails for the same reason (whatever you type other than number is taken as null/undefined). Even though dynamic changing of "type" property is  possible, the code does not enter that condition at all.