{"id":28058,"date":"2016-09-23T21:01:04","date_gmt":"2016-09-23T13:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28058"},"modified":"2025-04-03T23:51:29","modified_gmt":"2025-04-03T15:51:29","slug":"creating-phone-number-picker","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/","title":{"rendered":"How to Create a Simple Phone Number Picker"},"content":{"rendered":"<p><strong>Phone numbers<\/strong>, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a way that requires users to type the numbers in using their keyboards. This method frequently results in inaccurate data input.<\/p>\n<p>To <strong>reduce user input errors<\/strong> and improve the user experience of your site, you can create a <abbr title=\"Graphical User Interface\">GUI<\/abbr> that allows users to quickly enter their phone number, in a way that is similar to date pickers.<\/p>\n<p>In this tutorial, you\u2019ll see how to <strong>add a simple phone number picker to an input field<\/strong>. We\u2019ll use HTML5, CSS3 and JavaScript to get to the GUI you can see and test in the demo below. We\u2019ll also put <a href=\"https:\/\/www.hongkiat.com\/blog\/regular-expression-tools-resources\/\">regular expressions<\/a> in use to make sure users really enter a valid phone number.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/useful-calendar-date-picker-scripts-for-web-developers\/\">Useful Calendar and Date Picker Scripts for Developers<\/a>\n\t\t\t\t<\/p>\n<p><iframe height=\"507\" scrolling=\"no\" src=\"https:\/\/codepen.io\/rpsthecoder\/embed\/rLpvdY\/?height=507&theme-id=12825&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/rpsthecoder\/pen\/rLpvdY\/\" rel=\"nofollow\">\u00f0\u0178\u201d\u017e Phone Number Field w\/ Dial Screen <\/a> by Preethi (<a href=\"https:\/\/codepen.io\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<h3>1. Create the Phone Number Field<\/h3>\n<p>First, <strong>create an input field<\/strong> with a dial icon on the right that will open the dial screen on click. The dial icon just looks like 9 black boxes, arranged 3 by 3, must like what you see on a regular phone.<\/p>\n<p>I\u2019m using the <code>tel<\/code> input type for proper <a href=\"https:\/\/www.hongkiat.com\/blog\/html-5-semantics\/\">HTML5 semantics<\/a>, but you can also use the <code>text<\/code> input type if you want.<\/p>\n<pre>\r\n&lt;div id=\"dialWrapper\"&gt;\r\n    &lt;input id=\"phoneNo\" type=\"tel\"&gt;\r\n    &lt;img id=\"dialIcon\" src=\"dialIcon.png\"&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg\" alt=\"HTML Base of the Phone Number Picker\" width=\"700\" height=\"143\"><figcaption>HTML Base of the Phone Number Picker<\/figcaption><\/figure>\n<h3>2. Create the Dial Screen<\/h3>\n<p>The <strong>dial screen<\/strong> is <strong>a grid of numbers<\/strong> from 0 to 9 plus some special characters. It can be made with <strong>either a HTML <code>&lt;table&gt;<\/code> or JavaScript<\/strong>.<\/p>\n<p>Here, I\u2019ll show you how to create the dial screen table in JavaScript. You can, of course, add the table directly in the HTML source code if you prefer it that way.<\/p>\n<p>First, create a new <code>'table'<\/code> element in the <abbr title=\"Document Object Model\">DOM<\/abbr> by using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/createElement\" target=\"_blank\" rel=\"noopener\"><code>createElement()<\/code><\/a> method. Also give it the <code>'dial'<\/code> identifier.<\/p>\n<pre>\r\n\/* Create dial screen *\/\r\nvar dial = document.createElement('table');\r\n    dial.id = 'dial';\r\n<\/pre>\n<p><strong>Add a <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Statements\/for\" target=\"_blank\" rel=\"noopener\"><code>for<\/code><\/a> loop<\/strong> to insert the four rows of the dial table with it. Then, for each row, <strong>run another <code>for<\/code> loop<\/strong> in order to add three cells per row. <strong>Mark each cell<\/strong> with the <code>'dialDigit'<\/code> class.<\/p>\n<pre>\r\nfor (var rowNum = 0; rowNum &lt; 4; rowNum++) {\r\n    var row = dial.insertRow(rowNum);\r\n    for (var colNum = 0; colNum &lt; 3; colNum++) {\r\n        var cell = row.insertCell(colNum);\r\n        cell.className = 'dialDigit';\r\n        cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();\r\n    }\r\n}\r\n<\/pre>\n<p>The two <code>for<\/code> loops above calculate the digits that go into the cells of the dial table \u2014 the values of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/textContent\" target=\"_blank\" rel=\"noopener\"><code>cell.textContent<\/code><\/a> property \u2014 in the following way:<\/p>\n<pre>\r\n(colNum + 1) + (rowNum * 3)\r\n\/* first row *\/\r\n(0 + 1) + (0 * 3) = 1\r\n(1 + 1) + (0 * 3) = 2\r\n(2 + 1) + (0 * 3) = 3\r\n\/* second row *\/\r\n(0 + 1) + (1 * 3) = 4\r\n(1 + 1) + (1 * 3) = 5\r\n(2 + 1) + (1 * 3) = 6\r\n\/* etc. *\/\r\n<\/pre>\n<p>The last row is different, as it consists of <strong>two special characters<\/strong>, <code>-<\/code> and <code>+<\/code> that are used in phone number formats to identify regional codes, and the digit <code>0<\/code>.<\/p>\n<p>To create the last row to the dial screen, add the following <code>if<\/code> statement to the inner <code>for<\/code> loop.<\/p>\n<pre>\r\nfor (var rowNum = 0; rowNum &lt; 4; rowNum++) {\r\n  var row = dial.insertRow(rowNum);\r\n  for (var colNum = 0; colNum &lt; 3; colNum++) {\r\n    \/* if last row *\/\r\n    if (rowNum === 3) {\r\n      cell = row.insertCell(colNum);\r\n      cell.textContent = '-';\r\n      cell.className = 'dialDigit';\r\n      cell = row.insertCell(colNum);\r\n      cell.textContent = '0';\r\n      cell.className = 'dialDigit';\r\n      cell = row.insertCell(colNum);\r\n      cell.textContent = '+';\r\n      cell.className = 'dialDigit';\r\n      break;\r\n    }\r\n    cell = row.insertCell(colNum);\r\n    cell.className = 'dialDigit';\r\n    cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();\r\n  }\r\n}\r\n<\/pre>\n<p>The <strong>dial screen is now complete<\/strong>, add it to the <code>#dialWrapper<\/code> HTML container you created in Step 1 by using <strong>two DOM methods<\/strong>:<\/p>\n<ol>\n<li>the <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/querySelector\" target=\"_blank\" rel=\"noopener\"><code>querySelector()<\/code><\/a><\/strong> method to <strong>select the container<\/strong><\/li>\n<li>the <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/appendChild\" target=\"_blank\" rel=\"noopener\"><code>appendChild()<\/code><\/a><\/strong> method to <strong>append the dial screen<\/strong> \u2014 held in the <code>dial<\/code> variable \u2014 to the container<\/li>\n<\/ol>\n<pre>\r\ndocument.querySelector('#dialWrapper').appendChild(dial);\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-table.jpg\" alt=\"Dial Screen Table Without Styling\" width=\"700\" height=\"355\"><figcaption>Dial Screen Table without Styling<\/figcaption><\/figure>\n<h3>3. Style the Dial Screen<\/h3>\n<p>To make it more attractive, <strong>style the dial screen<\/strong> with CSS.<\/p>\n<p>You don\u2019t necessarily have to stick with my styling, but don\u2019t forget to <strong>add <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/user-select\" target=\"_blank\" rel=\"noopener\"><code>user-select:none;<\/code><\/a> property to the <code>#dial<\/code> container<\/strong> so that while the user is clicking on the digits, the text <strong>won\u2019t get selected by the cursor<\/strong>.<\/p>\n<pre>\r\n#dial {\r\n      width: 200px;\r\n      height: 200px;\r\n      border-collapse: collapse;\r\n      text-align: center;\r\n      position: relative;\r\n      -ms-user-select: none;\r\n      -webkit-user-select: none;\r\n      -moz-user-select: none;\r\n      user-select: none;\r\n      color: #000;\r\n      box-shadow: 0 0 6px #999;\r\n}\r\n.dialDigit {\r\n      border: 1px solid #fff;\r\n      cursor: pointer;\r\n      background-color: rgba(255,228,142,.7);\r\n}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-dialscreen.jpg\" alt=\"Dial Screen with Styling\" width=\"700\" height=\"454\"><figcaption>Dial Screen Table with Styling<\/figcaption><\/figure>\n<h3>4. Show the Dial Screen on Click<\/h3>\n<p>First, add the <code>visibility:hidden;<\/code> style rule to <code>#dial<\/code> <strong>in the above CSS<\/strong> to <strong>hide the dial screen<\/strong> by default. it\u2019ll be only shown when the user clicks on the dial icon.<\/p>\n<p>Then, add a click event handler to the dial icon <strong>with JavaScript<\/strong> to <strong>toggle the visibility<\/strong> of the dial screen.<\/p>\n<p>To do so, you need to use the aforementioned <code>querySelector()<\/code> and the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget\/addEventListener\" target=\"_blank\" rel=\"noopener\"><code>addEventListener()<\/code><\/a> methods. The latter <strong>attaches a click event<\/strong> to the dial icon and calls the custom <code>toggleDial()<\/code> function.<\/p>\n<p>The <code>toggleDial()<\/code> function <strong>changes the visibility<\/strong> of the dial screen from hidden to visible, and back.<\/p>\n<pre>\r\ndocument.querySelector('#dialIcon').addEventListener('click', toggleDial);\r\n\r\nfunction toggleDial() {\r\n    dial.style.visibility =\r\n    dial.style.visibility === 'hidden' || dial.style.visibility === ''\r\n    ? 'visible' : 'hidden';\r\n}\r\n<\/pre>\n<h3>5. Add the Functionality<\/h3>\n<p>Add a custom function that <strong>inputs digits into the phone number field<\/strong> on the click of the cells of the dial screen.<\/p>\n<p>The <code>dialNumber()<\/code> function <strong>appends the digits one by one<\/strong> to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Node\/textContent\" target=\"_blank\" rel=\"noopener\"><code>textContent<\/code><\/a> property of the input field marked with the <code>#phoneNo<\/code> identifier.<\/p>\n<pre>\r\nphoneNo = document.querySelector('#phoneNo');\r\nfunction dialNumber() {\r\n    phoneNo.value += this.textContent;\r\n}\r\ndialDigits = document.querySelectorAll('.dialDigit');\r\nfor (var i = 0; i &lt; dialDigits.length; i++) {\r\n    dialDigits[i].addEventListener('click', dialNumber);\r\n}\r\n<\/pre>\n<p>Now, you have a <strong>working dial screen<\/strong> to input phone number field.<\/p>\n<p>To keep up with the CSS, change the background color of the digits in their <code>:hover<\/code> and <code>:active<\/code> (when the user clicks on it) states.<\/p>\n<pre>\r\n.dialDigit:hover{\r\n      background-color: rgb(255,228,142);\r\n}\r\n.dialDigit:active{\r\n      background-color: #FF6478;\r\n}\r\n<\/pre>\n<h3>6. Add Regular Expression Validation<\/h3>\n<p>Add a <strong>simple <a href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-regex\/\">regex validation<\/a><\/strong> to validate the phone number while the user <strong>enters the digits into the input field<\/strong>. According to the validation rules I use, the phone number can only start with either a digit or the <code>+<\/code> character, and accept the <code>-<\/code> character afterwards.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/getting-started-with-regex\/\">Beginner\u2019s Guide to Regular Expression (Regex)<\/a>\n\t\t\t\t<\/p>\n<p>You can see the visualization of my regular expression on the screenshow below created with the <a href=\"https:\/\/www.debuggex.com\" target=\"_blank\" rel=\"noopener\">Debuggex<\/a> app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/debuggex-visualization.jpg\" alt=\"Debuggex Visualization\" width=\"700\" height=\"168\"><figcaption>Regex visualization from debuggex.com<\/figcaption><\/figure>\n<p>You can also <a href=\"https:\/\/www.hongkiat.com\/blog\/regex-web-developers\/\">validate the phone number<\/a> as per the phone number format of your country or region.<\/p>\n<p>Create a new <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/RegExp\" target=\"_blank\" rel=\"noopener\">Regular Expression object<\/a>, and store it in the <code>pattern<\/code> variable. Also create a custom <code>validate()<\/code> function that checks if the entered phone number <strong>complies with the regular expression<\/strong>, and if it\u2019s <strong>at least 8 characters long<\/strong>.<\/p>\n<p>When the input doesn\u2019t validate, the <code>validate()<\/code> function needs to <strong>give feedback<\/strong> to the user.<\/p>\n<p>I\u2019m <strong>adding a red border<\/strong> to the input field when the input is invalid, but you can inform user in other ways, for instance, with error messages.<\/p>\n<pre>\r\npattern = new RegExp(\"^(\\\\+\\\\d{1,2})?(\\\\d+\\\\-*\\\\d+)*$\");\r\nfunction validate(txt) {\r\n  \/\/ at least 8 characters for a valid phone no.\r\n  if (!pattern.test(txt) || txt.length &lt; 8) {\r\n    phoneNo.style.border = '2px solid red';\r\n    return false;\r\n  } else\r\n    phoneNo.style.border = 'initial';\r\n  return true;\r\n}\r\n<\/pre>\n<h3>7. Perform the Validation<\/h3>\n<p>The <code>validate()<\/code> functions <strong>needs to be called<\/strong> in order to perform the validation. Call it from the <code>dialNumber()<\/code> function you created in Step 5 in order to validate the value of the <code>phoneNo<\/code> variable.<\/p>\n<p>Note that I also added an <strong>additional validation<\/strong> for maximum characters (can\u2019t be more than 15) by using an <code>if<\/code> statement.<\/p>\n<pre>\r\nfunction dialNumber() {\r\n\tvar val = phoneNo.value + this.textContent;\r\n\t\/\/ maximum characters allowed, 15\r\n\tif (val.length &gt; 15) return false;\r\n\tvalidate(val);\r\n\tphoneNo.value = val;\r\n}\r\n<\/pre>\n<p>Your <strong>phone number picker<\/strong> is now ready, check out the final demo below.<\/p>\n<p><iframe height=\"507\" scrolling=\"no\" src=\"https:\/\/codepen.io\/rpsthecoder\/embed\/rLpvdY\/?height=507&theme-id=12825&default-tab=result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/rpsthecoder\/pen\/rLpvdY\/\" rel=\"nofollow\">Phone Number Field w\/ Dial Screen <\/a> by Preethi (<a href=\"https:\/\/codepen.io\/rpsthecoder\" rel=\"nofollow\">@rpsthecoder<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>","protected":false},"excerpt":{"rendered":"<p>Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a way that requires users to type the numbers in using their keyboards. This method frequently results in inaccurate data input. To reduce user input errors and improve the user experience of&hellip;<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[1312,3827,2512],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Simple Phone Number Picker - Hongkiat<\/title>\n<meta name=\"description\" content=\"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Simple Phone Number Picker\" \/>\n<meta property=\"og:description\" content=\"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-23T13:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T15:51:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Create a Simple Phone Number Picker\",\"datePublished\":\"2016-09-23T13:01:04+00:00\",\"dateModified\":\"2025-04-03T15:51:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/\"},\"wordCount\":942,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/creating-phone-number-picker\\\/phoneui-field.jpg\",\"keywords\":[\"Forms\",\"ui\\\/ux\",\"Website Design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/\",\"name\":\"How to Create a Simple Phone Number Picker - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/creating-phone-number-picker\\\/phoneui-field.jpg\",\"datePublished\":\"2016-09-23T13:01:04+00:00\",\"dateModified\":\"2025-04-03T15:51:29+00:00\",\"description\":\"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/creating-phone-number-picker\\\/phoneui-field.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/creating-phone-number-picker\\\/phoneui-field.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/creating-phone-number-picker\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Simple Phone Number Picker\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Simple Phone Number Picker - Hongkiat","description":"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Simple Phone Number Picker","og_description":"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a","og_url":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-09-23T13:01:04+00:00","article_modified_time":"2025-04-03T15:51:29+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Create a Simple Phone Number Picker","datePublished":"2016-09-23T13:01:04+00:00","dateModified":"2025-04-03T15:51:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/"},"wordCount":942,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg","keywords":["Forms","ui\/ux","Website Design"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/","url":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/","name":"How to Create a Simple Phone Number Picker - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg","datePublished":"2016-09-23T13:01:04+00:00","dateModified":"2025-04-03T15:51:29+00:00","description":"Phone numbers, besides names and emails, are the most frequently used contact information in online forms. Phone number fields are usually designed in a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/creating-phone-number-picker\/phoneui-field.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/creating-phone-number-picker\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Simple Phone Number Picker"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7iy","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28058","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28058"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28058\/revisions"}],"predecessor-version":[{"id":73474,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28058\/revisions\/73474"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28058"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}