• Form
• Overview
• Events
• Properties
• Methods
• Fields
• Numeric
• Date & Time
• Drop Lists
• Multi Selects
• Upload
• Custom

Numeric Fields

Numeric inputs will only allow user to type numbers, completely ignoring all other characters. Full keyboard support is implemented. Try using up/down arrow keys, ctr + up/down (cmd + up/down on mac) to increase numbers. When the number is changed it will be validated and formatted (if needed).

Preview

Code

<div class="w2ui-field"> <label>Integer:</label> <div><input id="w2int"></div> </div> <div class="w2ui-field"> <label>Float:</label> <div><input id="w2float"></div> </div> <div class="w2ui-field"> <label>Money:</label> <div><input id="w2money"></div> </div> <div class="w2ui-field"> <label>Hex:</label> <div><input id="w2hex"></div> </div> <div class="w2ui-field"> <label>Color:</label> <div><input id="w2color" style="text-align: left"></div> </div> <script> $(function () { $('#w2int').w2field('int'); $('#w2float').w2field('float'); $('#w2money').w2field('money'); $('#w2hex').w2field('hex'); $('#w2color').w2field('color'); }); </script>

Options

You can provide various options for numeric fields as second argument. The structure of the options object is below: options = { min : null, // min value max : null, // max value step : 1, // step when used with keyboard autoFormat : true, // if true, formats the numbers, percents, money fields autoCorrect : true, // if true, enforces min/max for numbers, dates or show an error currency: { prefix: w2utils.settings.currencyPrefix, suffix: w2utils.settings.currencySuffix, precision: w2utils.settings.currencyPrecision }, decimalSymbol : w2utils.settings.decimalSymbol, // symbol for fractions groupSymbol : w2utils.settings.groupSymbol, // symbol for number grouping arrow : false, // if true, will show down error line in a drop down field keyboard : true, // if true, user can use keyboard arrow to change the number precision : null, // defines precision for auto format prefix : '', // input prefix suffix : '' // input suffix }

User Comments

comments powered by Disqus