{"id":3989,"date":"2015-01-12T14:25:47","date_gmt":"2015-01-12T18:25:47","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=3989"},"modified":"2016-11-22T15:18:09","modified_gmt":"2016-11-22T20:18:09","slug":"keyboards-ios","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/","title":{"rendered":"Keyboards in iOS"},"content":{"rendered":"<p>This post is iOS-centric, but the concepts remain the same for most mobile devices.<\/p>\n<p>This weekend, I was using my iPhone, once to verify my debit card so I could rent a Redbox movie, and once to complete a survey after a negative experience at my local gas station. Both times, I was asked by the app and website to enter information that was numbers only into a input field, yet both sites presented me with the full iOS keyboard, making entry difficult. The survey code this app wanted me to enter was 16 digits, but that&#8217;s a whole different discussion.<\/p>\n<p>Click for a larger version:<\/p>\n<div id='gallery-1' class='gallery galleryid-3989 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-10.47.55.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-10.47.55-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-09.41.09.png'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-09.41.09-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>Annoying, right? The thing is that iOS ships with keyboards specially for entering phone numbers, websites and email addresses. Adding them to your website is easy and will make the lives of your site visitors who are on mobile devices better. Apple says this in their <a href=\"https:\/\/developer.apple.com\/library\/ios\/documentation\/StringsTextFonts\/Conceptual\/TextAndWebiPhoneOS\/KeyboardManagement\/KeyboardManagement.html\" target=\"_blank\" rel=\"nofollow\">developer docs<\/a>:<\/p>\n<blockquote><p>Whenever the user taps in an object capable of accepting text input, the object asks the system to display an appropriate keyboard. Depending on the needs of your program and the user\u2019s preferred language, the system might display one of several different keyboards. Although your app cannot control the user\u2019s preferred language (and thus the keyboard\u2019s input method), it can control attributes of the keyboard that show its intended use, such as the configuration of any special keys and its behaviors.<\/p><\/blockquote>\n<p>Here are the iOS keyboards:<\/p>\n<p><a href=\"https:\/\/dfwn148cvdexl.cloudfront.net\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png\" target=\"_blank\" rel=\"nofollow\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3994 size-large\" src=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png\" alt=\"iOS keyboards\" width=\"720\" height=\"532\" srcset=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png 1024w, https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-300x222.png 300w, https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png 1043w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>All it takes is adding an element to your input field and iOS devices will show the correct keyboard.<\/p>\n<p>Text:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;input type=&quot;text&quot; \/&gt;<\/pre>\n<p>Telephone:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;input type=&quot;tel&quot; \/&gt;<\/pre>\n<p>URL:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;input type=&quot;url&quot; \/&gt;<\/pre>\n<p>Email:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;input type=&quot;email&quot; \/&gt;<\/pre>\n<p>Zip code:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;input pattern=&quot;&#x5B;0-9]*&quot; type=&quot;text&quot; \/&gt;<\/pre>\n<p>That bit of code will greatly improve the usability of your app, cut down on mistakes in data entry and generally make your users happier. With more and more people using their devices, this is a simple fix to use even on your static\/CMS web forms. It will render correctly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>All it takes is adding an element to your input field and iOS devices will show the correct keyboard.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[923,9,22,46],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Keyboards in iOS - HighEdWebTech<\/title>\n<meta name=\"description\" content=\"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.\" \/>\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.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Keyboards in iOS - HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-12T18:25:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-22T20:18:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-10.47.55-150x150.png\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"Keyboards in iOS\",\"datePublished\":\"2015-01-12T18:25:47+00:00\",\"dateModified\":\"2016-11-22T20:18:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\"},\"wordCount\":375,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png\",\"articleSection\":[\"Accessibility\",\"apple\",\"Design\",\"iphone\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\",\"name\":\"Keyboards in iOS - HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png\",\"datePublished\":\"2015-01-12T18:25:47+00:00\",\"dateModified\":\"2016-11-22T20:18:09+00:00\",\"description\":\"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png\",\"width\":1043,\"height\":772},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Keyboards in iOS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web &amp; Marketing for Education &amp; Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Keyboards in iOS - HighEdWebTech","description":"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.","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.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/","og_locale":"en_US","og_type":"article","og_title":"Keyboards in iOS - HighEdWebTech","og_description":"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.","og_url":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/","og_site_name":"HighEdWebTech","article_published_time":"2015-01-12T18:25:47+00:00","article_modified_time":"2016-11-22T20:18:09+00:00","og_image":[{"url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/2015-01-11-10.47.55-150x150.png"}],"author":"Mike","twitter_card":"summary_large_image","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"Keyboards in iOS","datePublished":"2015-01-12T18:25:47+00:00","dateModified":"2016-11-22T20:18:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/"},"wordCount":375,"commentCount":0,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png","articleSection":["Accessibility","apple","Design","iphone"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/","url":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/","name":"Keyboards in iOS - HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage"},"thumbnailUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x-1024x757.png","datePublished":"2015-01-12T18:25:47+00:00","dateModified":"2016-11-22T20:18:09+00:00","description":"All it takes is adding an element to your input field and iOS devices will show the correct keyboard.","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#primaryimage","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2015\/01\/keyboard_types_2x.png","width":1043,"height":772},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2015\/01\/12\/keyboards-ios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"Keyboards in iOS"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web &amp; Marketing for Education &amp; Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/3989"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=3989"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/3989\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=3989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=3989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=3989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}