We Keep Coding

Restrict entering Spaces in TextBox in Javascript

In my code have to allow numerical alphabets and special characters. but in my code not accepting the space and special characters except #.
Here is my code.
allowAlphaNumericSpace(e: any) {
var code = 'charCode' in e ? e.charCode : e.keyCode;
if (
!(code > 47 && code < 58) && // numeric (0-9)
!(code >= 64 && code <= 91) && // upper alpha (A-Z)
!(code > 96 && code < 123)
) {
// lower alpha (a-z)
e.preventDefault();
}
}

charCode is non-standard, deprecated, and not foreseen for keydown events, it may be available, but always 0.
keyCode is also deprecated.
Use e.key:
const accepted = " ,;!?";
function allowAlphaNumericSpace(e) {
var code = e.key;
if (isNaN(code) && code.toUpperCase() == code.toLowerCase()
&& !accepted.includes(code)) {
e.preventDefault();
}
}
document.querySelector("input").addEventListener("keydown", allowAlphaNumericSpace);
<input>
If some other characters need to be accepted, it is easily adapted.

JavaScript regex auto commas with decimals

I'm using the following JavaScript + Regex to auto add commas to a user input as they type:
$('input.number').keyup(function(event) {
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/[^-\d.]/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});
This works great, but it does not work for decimals. It adds commas to the decimals, which I don't want.
I could update the code to do a check to see if there are commas after the decimal. However, I think there may be a more elegant solution with Regex.
$('input.number').keyup(function(event) {
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
var num = value
.replace(/[^-\d.]/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var numSplit = num.split('.');
if(numSplit.length > 1){
num = numSplit[0] + '.' + numSplit[1].replace(/,/g, "");
}
return num;
});
});
I've tried adding a check to first see if a . exists. But I did not write it correctly.
\B(?=[^.](\d{3})+(?!\d))
Is there a better way to do this with regex?
https://codepen.io/anon/pen/gNOgMm

Apply Regex only to the whole number
$('input.number').keyup(function(event) {
// skip for arrow keys
if (event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
var num = value
.replace(/[^-\d.]/g, "")
var numSplit = num.split('.');
if (numSplit.length > 1) {
num = numSplit[0]
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + numSplit[1].replace(/,/, "");
} else {
num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
return num;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">
Shorter Version
$('input.number').keyup(function(event) {
// skip for arrow keys
if (event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
var num = value
.replace(/[^-\d.]/g, "")
.replace(/^\.+/g, "")
.replace(/\./, "x").replace(/\./g, "").replace(/x/, ".")
return (/^\d+\.\d+$/.test(num))
? num.replace(/(\d)(?=(\d{3})+(?:\.\d+)$)/g, "$1,")
: num.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input class="number">

So, with a simple replace callback you can match the decimal part
then just return it, or match the assertion for a thousands place
then return ,.
No need to split, it just makes it more complicated.
Since you're using regex, do it all with regex.
The regex expanded:
( \. \d* ) # (1), Decimal part
| # or,
\B # Thousands part
(?=
(?: \d{3} )+
(?! \d )
)
var input = "122341234.188874";
input = input.replace (/[^-\d.]/g, "" );
input = input.replace (/(\.\d*)|\B(?=(?:\d{3})+(?!\d))/g,
function( m, g1 ) // match, group 1
{
if ( g1 > "" )
return g1;
else
return ",";
}
);
console.log(input);
Another thing you may want to consider is to validate the
form after stripping invalid characters.
I believe you could do that with a
replace (/^(?:.*?(-?(?:\d+(?:\.\d*)?|\.\d+))|).*$/g, "$1" );

How to remove zeros at starting

Plunker.
$(document).on('keypress', '.abc', function(e){
if (this.selectionStart == 0 && (e.which == 48 || e.which == 46) ){
return false;
}
});
In the above plunker it is restricting zero's when I try to enter. But when I go with cursor and remove the values before zero, then the zero's are remains.. but I don't want to show zeros before value...

Use this,
var yourString = "00001";
yourString = Number(yourString).toString();

Regular Expression on keypress for decimals with negative values

Hi can someone help me to improve this regular expression on this function to include negative values?
the function is:
function Validate7EntY2Dec(e, field) {
key = e.keyCode ? e.keyCode : e.which
// backspace
if (key == 8) return true
// 0-9 a partir del .decimal
if (field.value != "") {
if ((field.value.indexOf(".")) > 0) {
if (key > 47 && key < 58) {
if (field.value == "") return true
regexp = /[0-9]{2}$/
return !(regexp.test(field.value))
}
}
}
// 0-9
if (key > 47 && key < 58) {
if (field.value == "") return true
regexp = /[0-9]{7}/
return !(regexp.test(field.value))
}
// .
if (key == 46) {
if (field.value == "") return false
regexp = /^[0-9]+$/
return regexp.test(field.value)
}
// other key
return false
}
as far as I get /[0-9]{2}$/ validates two digits after the decimal point, and /[0-9]{7}/ validates seven digist in the integer. I would like to this accept also negative values so the user can insert -1234567.12 for example.
I found this regex ^[+-]?[0-9]{1,9}(?:\.[0-9]{1,2})?$ on other question but dont know how to insert in my function.
Also found that adding a - on /[0-9]{7}/ will accept negative values but it didnt, i did this: /[-0-9]{7}/
I need to keep my function because its been used already.
thank you in advance!
edit:
After the recommendation of #Ian my code was like this:
function Validate7EntY2Dec_Neg(e, field) {
key = e.keyCode ? e.keyCode : e.which
// backspace
if (key == 8) return true
// 0-9 a partir del .decimal
if (field.value != "") {
if ((field.value.indexOf(".")) > 0) {
if (key > 47 && key < 58) {
if (field.value == "") return true
regexp = /[0-9]{2}$/
return !(regexp.test(field.value))
}
}
}
// 0-9
if (key > 47 && key < 58) {
if (field.value == "") return true
regexp = /[0-9]{7}/
return !(regexp.test(field.value))
}
// .
if (key == 46) {
if (field.value == "") return false
regexp = /^[+-]?[0-9]{7}\.[0-9]{2}$/
return regexp.test(field.value)
}
// other key
return false
}
The change is on "function if (key == 46)..."
if (key == 46) {
if (field.value == "") return false
regexp = /^[+-]?[0-9]{7}\.[0-9]{2}$/
return regexp.test(field.value)
}
#Ian how to escape - ??

^[+-]?[0-9]{7}\.[0-9]{2}$ should work. The caret forces start of string and the dollar the end. I have also forced a 7.2 digit number, I assume that is what you want. Also there is the optional +/- to start with.

I propose you stop worrying about keypresses and validate the whole field each time it's changed. I believe this wouldn't cause any performance problem and would vastly improve your code's maintainability.
I would then propose the following code :
function Validate7EntY2Dec_Neg(e, field) {
return /^[+-]?[0-9]{7}\.[0-9]{2}$/.test(field.value);
}

validate input with decimal precision and scale

I am trying to create a javascript function which is called on keypress event on a input which does the following:
Input should be a valid decimal with format (5,2) => (XXXXX.YY) which are variable to the function. Input is restricted if user adds any value which does not conform to the format above.
If existing input starts with . append 0 to the starting automatically
HTML
<input type="text" onkeypress="return checkDecimal(event, this, 5, 2);" id="price2" value="27.15">
Javascript
function checkDecimal(evt, item, lenBeforeDecimal, lenAfterDecimal) {
var charCode = evt.which;
var trimmed = $(item).val().replace(/\b^0+/g, "");
if(checkStartsWith(trimmed, '.') == true){
trimmed = '0' + trimmed;
}
//Allow following keys
//8 = Backspace, 9 = Tab
if(charCode == 8 || charCode == 9){
return true;
}
//Only a single '.' is to be allowed
if(charCode == 46){
var dotOccurrences = (trimmed.match(/\./g) || []).length;
if(dotOccurrences != undefined && dotOccurrences == 1){
return false;
}else{
return true;
}
}
if (charCode > 31 && ((charCode < 48) || (charCode > 57))) {
return false;
}
if ($(item).val() != trimmed){
$(item).val(trimmed);}
//Check the start and end length
if(trimmed.indexOf('.') == -1){
if(trimmed.length >= parseInt(lenBeforeDecimal)){
return false;
}
}else{
var inputArr = trimmed.split(".");
if(inputArr[0].length > parseInt(lenBeforeDecimal) || inputArr[1].length >= parseInt(lenAfterDecimal)){
return false;
}
}
return true;
}
function checkStartsWith(str, prefix){
return str.indexOf(prefix) === 0;
}
Issues
If user inputs 12345.9 and then moves the caret position after 5, user is able to add another digit before the decimal 123456.9 which should not be allowed.
If user inputs 1.9 and then remove 1 and add 5, 5 is added at the end and the entered value becomes 0.95 and not 5.9
JS Fiddle

Consider using a regular expression like:
/^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
that allows everything up to and including your required format, but returns false if the number part is more than 5 digits or if the fraction is more than 2 digits, e.g.:
<input type="text" onkeyup="check(this.value)"><span id="er"></span>
<script>
function check(v) {
var re = /^(\d{0,5}\.\d{0,2}|\d{0,5}|\.\d{0,2})$/;
document.getElementById('er').innerHTML = re.test(v);
}
</script>
You'll need separate validation for the final value, e.g.
/^\d{5}\.\d{2}$/.test(value);
to make sure it's the required format.
I don't understand the requirement to add a leading zero to "." since the user must enter 5 leading digits anyway (unless I misunderstand the question).