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

This commit is contained in:
Skylar Ittner 2021-02-18 22:12:07 -07:00
parent da1492161c
commit ca08dbd780
4 changed files with 9 additions and 5 deletions

View File

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

View File

@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<div class="page-content row justify-content-center margin-top-tablet padding-bottom-tablet"> <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> <ul>
<li class="item-divider">Address</li> <li class="item-divider">Address</li>
<li> <li>
@ -77,7 +77,7 @@
<div class="item-inner"> <div class="item-inner">
<div class="item-title item-label">Number</div> <div class="item-title item-label">Number</div>
<div class="item-input-wrap"> <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> </div>
</div> </div>
@ -114,7 +114,7 @@
<div class="item-inner no-padding-right"> <div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div> <div class="item-title item-label">ZIP</div>
<div class="item-input-wrap"> <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> </div>
</div> </div>
@ -132,6 +132,8 @@
</label> </label>
</li> </li>
{{/each}} {{/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> </ul>
</div> </div>
</div> </div>

View File

@ -52,7 +52,7 @@
<div class="item-inner"> <div class="item-inner">
<div class="item-title item-label">ZIP</div> <div class="item-title item-label">ZIP</div>
<div class="item-input-wrap"> <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> </div>
</div> </div>

View File

@ -57,7 +57,7 @@
<div class="item-inner no-padding-right"> <div class="item-inner no-padding-right">
<div class="item-title item-label">ZIP</div> <div class="item-title item-label">ZIP</div>
<div class="item-input-wrap"> <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> <span class="input-clear-button"></span>
</div> </div>
</div> </div>