polyfilling inputmode on mobile devices

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form action="#" class="ws-validate">
    <div class="form-row">
        <label>type="text" inputmode="numeric" value="01-02"</label>
        <input type="text" inputmode="numeric" value="01-02" />
        <p>Fixes iPad and Android, but not iPhone, because keyboard doesn't fit</p>
    </div>
    <div class="form-row">
        <label>type="text" inputmode="numeric" value="01" pattern="[0-9]*"</label>
        <input type="text" inputmode="numeric" value="01" pattern="[0-9]*" />
        <p>Fixes Android, but not on iOS, because pattern already works on iOS</p>
    </div>
    <div class="form-row">
        <label>type="text" inputmode="numeric" value="01" pattern="[0-9]{2,7}"</label>
        <input type="text" inputmode="numeric" value="01" pattern="[0-9]{2,7}" />
        <p>Fixes Android and iOS, (pattern is too complicated for iOS)</p>
    </div>
</form>
<p>Don't use type="number" for simple digit numbers (i.e. creaditcard). Use type="text" in combination with inputmode="number" and a pattern attribute.</p>
<p><a href="http://afarkas.github.io/webshim/demos/demos/cfgs/input-number.html" target="_blank">number configurator</a>

</p>

CSS

form {
    margin: 20px auto;
    width: 420px;
}
.form-row {
    padding: 15px 5px 10px;
}
.form-row:first-child {
    padding-top: 5px;
}
label {
    display: block;
    margin: 3px 0;
}
.form-row input {
    padding: 3px 1px;
    width: 100%;
}
.form-row p {
    margin: 2px 0 5px;
    padding: 0;
    font-size: 90%;
    color: #666;
}

JavaScript

webshims.polyfill('forms');