Using type number for a currency input

by Geo George

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<fo
    
    <div>
        <h2>With spinbuttons</h2>
    <div class="form-row">
        <label for="c1">Currency</label>
        <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
    </div>
    <div class="form-row">
        <label for="c2">Currency w bootstrap</label>
  
        </div>
        <hr />
       <div class="hide-inputbtns">
        <h2>Without spinbuttons</h2>
    <div class="form-row">
        <label for="c1">Currency</label>
        <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="currency" id="c1" />
    </div>
    <div class="form-row">
        <label for="c2">Currency w bootstrap</label>
    <div class="input-group"> 
        <span class="input-group-addon">$</span>
        <input type="number" value="1000" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
    </div> 
        
</form>
<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: 5px 10px;
}
label {
    display: block;
    margin: 3px 0;
}
.form-row input {
    padding: 3px 1px;
    width: 100%;
}
input.currency {
    text-align: right;
    padding-right: 15px;
}
.input-group .form-control {
    float: none;
}
.input-group .input-buttons {
    position: relative;
    z-index: 3;
}

JavaScript

webshims.setOptions('forms-ext', {
    replaceUI: 'auto',
    types: 'number'
});
webshims.polyfill('forms forms-ext');