{"id":6,"date":"2015-12-17T17:00:09","date_gmt":"2015-12-17T17:00:09","guid":{"rendered":"http:\/\/www.kenwalger.com\/blog\/?p=6"},"modified":"2017-07-09T22:50:52","modified_gmt":"2017-07-10T05:50:52","slug":"numeric-inputs-and-browser-differences","status":"publish","type":"post","link":"https:\/\/www.kenwalger.com\/blog\/css\/numeric-inputs-and-browser-differences\/","title":{"rendered":"Numeric Inputs and Browser Differences"},"content":{"rendered":"

I was working on a project the other day building a user information input form off of a mock design. Simple enough and then I got to an input requiring numbers for US Postal Codes. “Great!” I thought, “I can use an <input type=’number’> in my form.” Everything was spiffy until I tried it in various browsers. Let’s have a quick look at numeric inputs and browser differences.<\/p>\n

Numeric Inputs<\/h3>\n

In Chrome, the form was rendered as:<\/p>\n

\"No<\/a>
Chrome<\/figcaption><\/figure>\n

Looks pretty good, right? Nice and clean. Then I opened it in Firefox:<\/p>\n

\"Spinner<\/a>
Firefox<\/figcaption><\/figure>\n

What the heck? I didn’t add a number spinner in there. After digging around for a bit this is one of the wonderful side affects of a lack of specificity in the official specification<\/a>. Further, if one continues to read through that particular specification (4.10.5.1.12 Number state (type=number<\/em>)) one learns a couple of things.<\/p>\n

    \n
  1. This specification does not define what user interface user agents are to use, and<\/li>\n
  2. That it would be inappropriate for credit card numbers or US postal codes.<\/li>\n<\/ol>\n

    Okay, so I choose the wrong type for my input field. But what is the deal with that spinner? What if I just want an actual number field but no spinner? Well, you smack it out of there with some CSS and the appearance property. If one uses:<\/p>\n

    \/* Firefox - remove spinner *\/<\/span>\ninput[type=number] <\/span>{<\/span>\n  -moz-appearance<\/span>:<\/span> textfield;<\/span>\n}<\/span><\/code><\/pre>\n
    The lovely spinner disappears. I won’t cover the rest of the browsers as they all are similar but slightly different.<\/p>\n
    When then, do we use <input type=”number”>? Again, in looking at the specification, one would use it when one needs a number that is strictly speaking a number. It is also useful, with the spinner or not, if we want to limit the range and stepping of the number as follows:<\/p>\n
    <input type=number min=0 step=0.01 name=price><\/pre>\n
    Conclusion<\/strong><\/h3>\n
    Another wonderful discovery of different renderings in different browsers. But, not that we know, we can allow our users to have the same experience in both browsers.<\/p>\n
    Happy coding!<\/p>\n
     <\/p>\n\"Facebook\"<\/a>\"twitter\"<\/a>\"reddit\"<\/a>\"linkedin\"<\/a>\"mail\"<\/a>","protected":false},"excerpt":{"rendered":"
    I was working on a project the other day building a user information input form off of a mock design. Simple enough and then I got to an input requiring numbers for US Postal Codes. “Great!” I thought, “I can use an <input type=’number’> in my form.” Everything was spiffy until I tried it in … Continue reading “Numeric Inputs and Browser Differences”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":201,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pmpro_default_level":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[12,11,10,13],"yst_prominent_words":[229,231,226,232,227,237,236,223,233,224,228,225,235,230,234],"class_list":["post-6","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-input","tag-number","tag-spinner","tag-type","pmpro-has-access"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.kenwalger.com\/blog\/wp-content\/uploads\/2015\/12\/numeric-inputs-e1493130075423.png?fit=125%2C125&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8lx70-6","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":5,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/6\/revisions"}],"predecessor-version":[{"id":444,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/posts\/6\/revisions\/444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/media\/201"}],"wp:attachment":[{"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/media?parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/categories?post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/tags?post=6"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.kenwalger.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}