Well, now you don't need to worry about it. HTML5 makes your development life easier, in order to achieve this, you just have to add type="tel" in your input element, rest HTML5 will take care for you.
<input id="phone" type="tel"/>Here is a simple demo.
As of writing, only few browsers provide support for this new feature.
If you want to make your textbox self explanatory, you can use additional attribute "Placeholder" by assigning meaningful text. The "placeholder", in the phone textbox example,will looks like this:
<input id="phone" type="tel" placeholder="Enter Valid Phone Number"/>Here is a simple demo.
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <meta charset="utf-8"> <title>HTML5 Phone Example</title> </head> <body bgcolor="#bnde45"> <fieldset> <legend>HTML5 Phone Type</legend> <table> <tr> <td><form action="#">Enter Phone#: <input type="tel" name="phone" required/> <input type="submit"/></form></td></tr> </form></td></tr> </table> </fieldset> <br/> </body> </html>See Live Example