From 6d55f7c2f8930d14ebc162eccbaaadfa506f8cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tonni=20T=C3=B8lb=C3=B8ll=20Lund=20Aagesen?=
 <tonni@toelboell-lund.dk>
Date: Tue, 31 Jan 2017 23:20:19 +0000
Subject: [PATCH] android/chrome doesn't render numeric keypad unless type=tel

---
 templates/form/card.liquid | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/form/card.liquid b/templates/form/card.liquid
index 0109379..4d36a00 100644
--- a/templates/form/card.liquid
+++ b/templates/form/card.liquid
@@ -21,7 +21,7 @@
         <div class="form-group has-feedback">
           <div class="col-xs-12">
             <label for="cardnumber" class="control-label">{% t Card number %}</label>
-            <input type="text" id="cardnumber" name="cardnumber" class="form-control" autocomplete="cc-number" autofocus="autofocus" aria-describedby="cardnumberSuccess" pattern="[0-9]*" data-mask="#" inputmode="numeric">
+            <input type="tel" id="cardnumber" name="cardnumber" class="form-control" autocomplete="cc-number" autofocus="autofocus" aria-describedby="cardnumberSuccess" pattern="[0-9]*" data-mask="#" inputmode="numeric">
             <span id="cardnumber-check" class="fa fa-fw fa-check form-control-feedback" aria-hidden="true" style="display: none"></span>
             <span id="cardnumber-sr" class="sr-only">(success)</span>
           </div>
@@ -32,19 +32,19 @@
           <div class="col-xs-6"><label for="cvd" id="cvd-label" class="control-label">CVV/CVD</label> <i id="cvd-help-toggle" class="fa fa-fw fa-question-circle clickable" data-toggle="#cvd-help"></i></div>
 
           <div class="col-xs-3" style="padding-right: 2px;">
-            <input type="text" id="expiration-month" name="expiration[month]" class="form-control" autocomplete="cc-exp-month" aria-describedby="expiration-month-sr" placeholder="MM" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important; margin-right: 30px !important">
+            <input type="tel" id="expiration-month" name="expiration[month]" class="form-control" autocomplete="cc-exp-month" aria-describedby="expiration-month-sr" placeholder="MM" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important; margin-right: 30px !important">
             <span id="expiration-month-check" class="fa fa-fw fa-check form-control-feedback" aria-hidden="true" style="right: 2.5px; display:none;"></span>
             <span id="expiration-month-sr" class="sr-only">(success)</span>
           </div>
 
           <div class="col-xs-3" style="padding-left: 2px;">
-            <input type="text" id="expiration-year" name="expiration[year]" class="form-control" autocomplete="cc-exp-year" aria-describedby="expiration-year-sr" placeholder="YY" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important">
+            <input type="tel" id="expiration-year" name="expiration[year]" class="form-control" autocomplete="cc-exp-year" aria-describedby="expiration-year-sr" placeholder="YY" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important">
             <span id="expiration-year-check" class="fa fa-fw fa-check form-control-feedback" aria-hidden="true" style="display: none"></span>
             <span id="expiration-year-sr" class="sr-only">(success)</span>
           </div>
 
           <div class="col-xs-6">
-            <input type="text" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric">
+            <input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric">
             <span id="cvd-check" class="fa fa-fw fa-check form-control-feedback" aria-hidden="true" style="display: none"></span>
             <span id="cvd-sr" class="sr-only">(success)</span>
           </div>