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">
<form action="#">
    
        <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="c1">Currency</label>
        <input type="number"  />
    </div>

 
        
</form>

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');

$('input').val('99999999999999');

$(document).ready(function(){
	alert($('.currency').val()) ;
  
})