Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Contributor
okicer
Posts: 6
Registered: ‎07-04-2013
My Device: Q10

textfield / textarea input masking

Hello,

 

I need masking on an input area (textfield or textarea). I know TextField has a password masking feature but I am looking for a mask for a specific text format like phone number (___) - ___ ____ or a specific format like ____-____ 

 

Does anyone have any idea how to do that?

 

Thanks a lot...

Please use plain text.
Developer
simon_hain
Posts: 15,805
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: textfield / textarea input masking

it's not in the API yet. I heard there will something in 10.2, but still some time till that.
I build my own by comparing the old text to the new text using regular expressions in a qt utility function. if the new text does not match the rule i replace it with the old text.
this creates a small flicker on the screen (new letter is visible a very short time), but seems to be the best solution so far.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
sorout2009
Posts: 104
Registered: ‎08-23-2012
My Device: Blackberry Z10
My Carrier: TATA DOCOMO

Re: textfield / textarea input masking

you can call the below function from onTextChanging of TextField like below

 

onTextChanging: {
textFieldId.text = alphabatesOnly(textFieldId.text);
}

 

 

function alphabatesOnly(textin) {
var reg = /^([A-Za-z])*$/;
var m_strOut = new String(textin);
if (reg.test(textin) == false) {
m_strOut = m_strOut.replace(m_strOut.charAt(m_strOut.length - 1), '');
}
return m_strOut;
}

Dharmender Singh
Please use plain text.
New Contributor
okicer
Posts: 6
Registered: ‎07-04-2013
My Device: Q10

Re: textfield / textarea input masking

Thanks guys. This code works for testing incoming text, however what I need is a show an input mask to user (like __/__/____ ) and let user fill the mask with his own input. There are some samples here (http://digitalbush.com/projects/masked-input-plugin/)

 

I have tried to write a function for that but couldn't succeed :smileysad:

Please use plain text.
Developer
simon_hain
Posts: 15,805
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: textfield / textarea input masking

i would suggest to use multiple fields for that, or write a custom component.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
BlackBerry Development Advisor
PBernhardt
Posts: 740
Registered: ‎12-16-2008
My Device: BlackBerry Z30
My Carrier: Bell

Re: textfield / textarea input masking

A custom component or multiple fields are good way to go. Might be overkill, depending on what you are actually looking for.

 

What input specifically are you looking to capture? If it's a date, just use a DateTimePicker. If it's not that but the input options are tightly contrained, you could also just build your own custom picker.

Paul Bernhardt
Application Development Consultant
BlackBerry
@PBernhardt

Did this answer your question? Please accept this post as the solution.
Found a bug? Report it to the Developer Issue Tracker
Please use plain text.
New Contributor
okicer
Posts: 6
Registered: ‎07-04-2013
My Device: Q10

Re: textfield / textarea input masking

I guess I have to either wait for 10.2 or design a custom component.

What I am trying to have is a text box that accepts 19 digits with _____ _____ _____ ____  (3x5 and 1x4) format, and I am trying to show this mask to user so he/she can fill it easily.

Please use plain text.
New Contributor
okicer
Posts: 6
Registered: ‎07-04-2013
My Device: Q10

Re: textfield / textarea input masking

Could you please explain how to code it with multiple fields?

Please use plain text.
Developer
simon_hain
Posts: 15,805
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: textfield / textarea input masking

https://developer.blackberry.com/cascades/reference/bb__cascades__textfield.html#property-maximumlen... allows you to set the max length, no need for extra hoops with regex.

putting multiple text fields next to eachother should not be very difficult in QML.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
New Contributor
okicer
Posts: 6
Registered: ‎07-04-2013
My Device: Q10

Re: textfield / textarea input masking

Thanks Simon.

I know how we can set the max length or put multiple textfields next to each other, my question was what the approach is to have a mask on a textfield like '____-____'; and then how we'll replace each _ character with the character user typed.

My approach is set the text property of textfield as '____-____' at the beginning

Set the current cursor position to position 0 at the in the textfield // that i couldn't so far

Replace each '_' characters as user typing... 

Do you have any better approach?

Thanks again...

 

Please use plain text.