Add inputtype=numeric to ZIP code and street number inputs, fix iOS display bug

Skylar Ittner 3 years ago
parent da1492161c
commit ca08dbd780

@ -125,11 +125,13 @@ function toggleLettersInAddressNumber() {
$("#address-has-letters-checkbox").prop("checked", false);
$("#housenumberinput").attr("type", "number");
$("#housenumberinput").attr("placeholder", "1234");
$("#housenumberinput").attr("inputmode", "numeric");
} else {
// allow
$("#address-has-letters-checkbox").prop("checked", true);
$("#housenumberinput").attr("type", "text");
$("#housenumberinput").attr("placeholder", "1A2B3");
$("#housenumberinput").attr("inputmode", "text");
}
}

@ -68,7 +68,7 @@
</div>
</div>
<div class="page-content row justify-content-center margin-top-tablet padding-bottom-tablet">
<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
<div class="list no-hairlines no-margin-top col-100 medium-80 large-50 elevation-tablet">
<ul>
<li class="item-divider">Address</li>
<li>
@ -77,7 +77,7 @@
<div class="item-inner">
<div class="item-title item-label">Number</div>
<div class="item-input-wrap">
<input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off">
<input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
</div>
</div>
</div>
@ -114,7 +114,7 @@
<div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div>
<div class="item-input-wrap">
<input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
<input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
</div>
</div>
</div>
@ -132,6 +132,8 @@
</label>
</li>
{{/each}}
<!-- Extra hidden element for padding because the last list entry likes to hide under the bottom bar on iOS -->
<li style="visibility: hidden;"><span class="item-content">&nbsp;</span></li>
</ul>
</div>
</div>

@ -52,7 +52,7 @@
<div class="item-inner">
<div class="item-title item-label">ZIP</div>
<div class="item-input-wrap">
<input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
<input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
</div>
</div>
</div>

@ -57,7 +57,7 @@
<div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div>
<div class="item-input-wrap">
<input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
<input type="text" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
<span class="input-clear-button"></span>
</div>
</div>

Loading…
Cancel
Save