Archive
Decimal TextBox with jQuery
Problem : I had to work with formatting decimal places for a quantity text box (or label) on a halfway developed project. I wanted a solution, where i can handle this on one place and applies everywhere with quantity text box.
Solution :
1. Placed this code on the master page, This section will
- Format all the textboxes content with specific css (QuantityTextBox in this example) on page load,
- allow to enter only numeric values with one decimal mark. (onkeydown, will call the js function called OnlyDecimalNumbers).
- after entering the data, input will format on leave (on onblur event)
var decimalPoints = Number(‘<%: DecimalPoints%>’); //getting number of decimal points from serverside, which user can //defines
$(“.QuantityTextBox”).each(function () {
var originalText = Number($(this).val());
$(this).val(originalText.toFixed(decimalPoints));
});$(“.QuantityTextBox”).live(“keydown”, function (event) {
return OnlyDecimalNumbers(event, $(this));
});$(“.QuantityTextBox”).live(“blur”, function () {
var stringValue = $(this).val();
var lastChar = stringValue[stringValue.length – 1];
if (lastChar == ‘.’) {
stringValue = stringValue.slice(0, stringValue.length – 1);
}var originalText = Number(stringValue);
$(this).val(originalText.toFixed(decimalPoints));
});
2. Added following function on JS file.
//common function to use for allowing only numbers with decimal places. call on onkeydown
function OnlyDecimalNumbers(event, control) {
var existingValue = control.val();
var charCode = (event.which) ? event.which : event.keyCode;if (event.shiftKey)
return false;if (charCode == 46 || charCode == 8)
return true;if (existingValue.indexOf(“.”) == -1 && charCode == 190)
return true;if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;return true;
}
3. Finally add “QuantityTexBox” css on all the quantity showing/adding textboxes.
Pros on this solution : Can handle all the quantity related formatting on one place, if we have added above css on all the qty textboxes.
Cons : If we need to different CSS per textboxes for styles, we cannot do this, on my situation we were not adding styles directly to textboxes.