• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Paul Clapham
  • Ron McLeod
  • Liutauras Vilda
  • Bear Bibeault
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Piet Souris
  • salvin francis
  • Stephan van Hulst
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Jj Roberts

phone number input

 
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I want to create a html (actually JSP, but I assume this is a html issue..) which has a field that lets user enter 10 digits phone number. However, I want to separate the field into 3 box. First box contains 3 digits, user can click tab after finishing the first box, it should automatically jump to the 2nd box which contains 3 digits, and the 3rd box contains 4 digits. I am sure we have all seen such forms. I need to take the hone number input as a whole string from my "<form>". How do people usually handle such trick ?

thanks
 
Marshal
Posts: 67478
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I rather dislike the three-box method and prefer a single box in which I let the user enter a free-form string of digits with whatever punctation they please. On input I simply strip out anything that's not a digit and verify that there are the 10 digits left.

To make the 3-box format "auto-tab" simply check the length of the input in a key event handler, and focus to the next input if it's "full".
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
There are plenty of examples out on the net. A google search should turn up decent results. [I also hate the 3 box input]

Eric
 
steve Pentas
Greenhorn
Posts: 14
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
A follow-up question --- Do you mean if I use 3 box format I have to use javascript then (assume I want the "tab" over feature) ?
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Google: JavaScript Autotab Phone

It should give you what you need.

Eric
 
This is my favorite show. And this is my favorite tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic