Develop Reference

How do I format AntD form input fields such as phone numbers and SSNs in React?

I have an AntD form with an Input field for phone numbers, and another to capture SSN's. As a user types a phone number or SSN, I would like the fields to format accordingly.
For example, instead of the phone number being 1234567890 as typed into the field, it should format as (123) 456-7890 with it initially being (___) ___-____. Similarly, in the SSN field if a user types their SSN such as 123456789 it should format as 123-45-6789 with it initially being ###-##-####.
What I'm really looking for is the proper way to do this in AntD. So not necessarily fixing the approach I'm trying to get to work.
I've been trying a variety of approaches to solve this, but none ever seem to work for me. For example, I've tried:
Use onChange and create a normalizeInput function as outlined here.
After thinking to myself that I shouldn't need to reinvent the wheel and there must be an npm package that I can simply leverage, I tried installing and using react-number-format. It was formatting the field and contents the way that I wanted but I lost the AntD UI (the input field no longer looked like an AntD input field).
Tried playing with a Form's getFieldsValue and setFieldsValue tags but got nowhere fast. I probably just didn't know what I was doing.
Tried using AntD's InputNumber function instead once i saw it had a formatter field that'd do the trick. But I abandoned that approach given I didn't want the up and down arrow controls that come with an InputNumber widget.
Currently #1 sort of works but not quite and I'm not sure why. It uses onChange to read in the current value, and adjust it accordingly, but there are two problems..
previousValue becomes undefined on the 6th, 8th, and 10th digit. Why? You'll see it in console.log in my codesandbox below.
The UI's field never sets using the value tag. Why? I can see the value is changing via console.log, but would've thought the setState function would've set the state within onChange, and therefore the field would show the formatted version due to the value tag..?
Here is my codesandbox illustrating the problem (MyForm.js file).

check this
https://github.com/antoniopresto/antd-mask-input
is a library to make it.
The component is
<MaskedInput mask="11/1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
where you give the prop "mask", where you can make the format.
in your case it would be
<MaskedInput mask="(111) 111-1111" name="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>

Mobile numeric keyboard [0-9] in textarea

Is it possible to open up the mobile numeric keyboard in a textarea box?
The typical pattern="[0-9]*" does not seem to work with a textarea and I can't find any other information on this anywhere else. I am trying to get this working in an angular app, so is there some way to preventDefault() on the default keyboard and somehow trigger the numeric keyboard?
e.g.
<textarea id="searchBox" pattern="[0-9]*" ng-model="searchParams.searchString" rows="3" ng-blur="formatSearch()"></textarea>

Unfortunately this is not yet possible for textarea. I have searched exhaustively on this and tried many varietions of pattern and types and so on but it just is not supported for textarea.
There are two possible solutions, either you can create your own html5 custom soft keyboard and apply a trick not to open the default keyboard.
Or (more elegant I think) use a normal input with type number or type tel and attach an onkeyup listerer. When enter is pressed, you process the line into your textarea and clean plus refocus the input.

isn't possible use input?
like
<input name="numbers" type="tel">
and than style the input like a textarea.
i dont have any idea for the textarea.

You can use the global attribute inputmode in textarea to alter Android or iPhone keypad.
<textarea inputmode="numeric"></textarea>
MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

A textarea can be validated via php but not in html. Below is my way of validating textarea,
$value=$_POST['value from textarea']
if(preg_match("/^[A-Za-z0-9]+$/", $value != 1) {
echo"oops";
} else {
echo "success";
}

Is there a way to open the 'alphanumeric' keyboard with numbers by default?

I'm devlopping a web app using Phonegap and HTML5.
When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.
Is that even possible?

Telephone: <input type="tel" name="usrtel">
This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)
The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools
Edit from Mon. 1st of Sept. 2014, 4:30pm:
I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.
If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:
HTML
<input type="text">
and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern
The idea is simple. The input starts off and ends up with type="text",
but it briefly becomes type="number" on the touchstart event. This
causes the correct iOS keyboard to appear. As soon as the user begins
to enter any input or leave the field, the input becomes type="text"
once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input
that has already been filled out, the input will be lost (if it
doesn't validate). This means the user won't be able to go back and
edit previous fields. In my case, this isn't all that bad because the
user may want to use the calculator over and over again with different
values, so automatically deleting the input will save them a few
steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type
attributes of email, number, search, tel, and url. These will switch
the keyboard that is displayed. See the type attribute.
If there are more questions, let me know and i'm going to edit again.

Titanium Ipad: How to restrict the textbox to allow specific format

I am new to Titanium. I am developing an ipap app using titanium. My app needs a textbox that allow only 1234AA or 1234 AA format.(AA/aa). i want to display a message under textbox "Invalid format: 1234 AA" while entering text in texbox.it should disappear after correct format is entered. I searched on google but i didn't find anything.
how to write the code for this?
Thanks!
I tried in another way that: I added a eventlistener 'click' to a button with code
submit.addeventlistener('click',function(){
pattern="[0-9]{4}\s?[A-Za-z]{2}";
var textfieldvalue=textfield.value;
if(!textfieldvalue.match(pattern))
{
var errorlabel=Ti.UI.createlabel({color:'black',text:'Invalid format:
1234AB'...});
win.add(error);
}
else{
//opening other window
}
});
its working but text box allowing more than 4 digits and more than 2 char (I given exact number in pattern)..what's wrong in my pattern?
Still I want this code for textfield (showing error message while typing in textfield until correct format is entered ) what event i have to use for textfield?

You can set "pattern" (regex) to the input field. In this case it'd be something like pattern="[0-9Aa]{4}\s?[0-9Aa]{2}".
Then you must set oninvalid event listener to the input field. This will fire when pattern match is not met. e.g oninvalid="showInvalidFormatMsg()" or preferrably fieldElem.addEventListener("invalid", showInvalidFormatMsg);
After this you can either use built-in tooltip with setCustomValidity function or just display as a text in DOM in that showInvalidFormatMsg
I'm unable to write working code atm. But if you're unable to follow these instructions and no-one has answered with full code, I try to find some free spot to help you with this.

jQuery prefil dashes in text field

I have a text field where a user inputs a value in the form of 2012-112233-123. I would like the dashes to be automatically added to the field as the input is entered.
I can implement a basic check on the keyup event that checks if the cursor is in the 5th or 12th position, but this causes issues when backspacing (dashes are re-added upon removal). If possible I would also like to ignore the user input if they decide to manually add the dash.
Is there an easy way of doing this, or a simple plugin I can use? Seems like a lot of code and checking for something that I would assume is a fairly common requirement.

Take a look at input masks.
This jQuery plugin looks good.
It allows you to do things such this:
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
There's even a callback available for when the input is filled.

I once used this plugin:
http://digitalbush.com/projects/masked-input-plugin/
for your need just define
$(".yourinput").mask("9999-999999-999");