Accept Number Special Character and Comma in Input field using Charcode - javascript

I am using charcode so that user can input only number, special-character and comma.
<input type="text" class="form-control numOnly"
onkeypress="return event.charCode >= 48 && event.charCode <= 57">
Right now it is accepting only number but I want to allow special character and comma using charcode.
what am I missing?

Try Below
<input type="text" class="form-control numOnly" onkeypress="return event.charCode >= 32 && event.charCode <= 57">

<input type="text" class="form-control numOnly" onkeypress="return Validate(event);">
<script type="text/javascript">
function Validate(event) {
var regex = new RegExp("^[0-9-!##$%*?,]");
var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
}
</script>

Here you can view all the javascript charcodes.
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
The comma one for example is 188.
You can also use https://github.com/KevinSheedy/jquery.alphanum to facilitate your life.
Edit: I noticed you have a class named NumOnly there. Is it only for styling?

Related

Fill up an input text after 2 other input boxes were filled

I have a table that contains the following columns: size, width, length which are all input texts (the last one, length, is disabled).
I want to insert the division width/size into length once the user fills up these 2 fields. I don't know how to do it and would like to get help!
I created them as follows:
<td class="ClearDataTD"><input type="text" name="WIDTH__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" onKeypress="var k = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which ; return /^([\b0-9])\$/.test(String.fromCharCode(k));"></td>
<td class="ClearDataTD"><input type="text" name="SIZE__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" onKeypress="var k = event.keyCode ? event.keyCode : event.charCode ? event.charCode : event.which ; return /^([\b0-9])\$/.test(String.fromCharCode(k));"></td>
<td class="ClearDataTD"><input type="text" name="LENGTH__m$memIdx" value="" maxlength="5" size="5" class="ClearInput" disabled="disabled"></td>
Thanks!
You can check from the JavaScript, something like: "When WIDTH__m$memIdx and SIZE__m$memIdx has values, then LENGTH__m$memIdx.value = WIDTH__m$memIdx/SIZE__m$memIdx.
function fillLength() {
var width = document.getElementById("width");
var size = document.getElementById("size");
var length = document.getElementById("length");
if(width.value && size.value) {
length.value = width.value/size.value
}
}
You want to call this function on focusout event. And probably you want to add few checks: if size is not a zero etc.

How to make allow alphabets only for a text field, validating on "OnClick" event? Please correct me what i am doing wrong with my script [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Dear Sir i want to use this code for alphabet only.This code not working i need your help please correct my code i am unable to find the error why it creating problem.I am hoping kind reply for correct code.
$(document).ready(function() {
$('#FullName').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" name="FullName" id="FullName" required>
You can use this: (Without to write any function)
<input type="text" name="onlyalphabet" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode == 32)">
From the description of the problem it sounds like you're trying to restrict the value entered to only alphabetic characters, and also . and spaces. As such you need to hook to the input event of the element. From there you can use a regex to remove invalid characters. Try this:
$(document).ready(function() {
$('#FullName').on("input", function(e) {
$(this).val((i, v) => v.replace(/[^a-z \.]/gi, ''));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" name="FullName" id="FullName" required>
As an aside, note that bind() was deprecated a long time ago and should not be used. on() is best practice now.
Without space
$(document).ready(function() {
$('#FullName').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" name="FullName" id="FullName" onkeypress="return isNumberKey(event);" required>
With Space
$(document).ready(function() {
$('#FullName').bind("cut copy paste drag drop", function(e) {
e.preventDefault();
});
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || charCode == 32)
return true;
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" name="FullName" id="FullName" onkeypress="return isNumberKey(event);" required>

Masking to input type text to only 4 digits

I am trying restrict a user from entering more than 4 digits.
For that I am using:
$("#YEAR").mask("(9999)");
But I'm getting the following error:
JavaScript runtime error: Object doesn't support property or method 'mask'
Do I need to include a library for it?
A simple solution could be:
$(function () {
$('#YEAR').on('keypress', function(e) {
var charCode = (e.which) ? e.which : event.keyCode
if (charCode < 48 || charCode > 57) {
return false;
}
return true;
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" maxlength="4" id="YEAR" name="YEAR"/>
</form>

Textbox numeric with still character e input and negative integers with javascript

I have a textbox with numeric inputs. Here is my javascript set to numeric textbox. But when I try to input letters, "e" is allowed. Problem: What I want to do is no letter should be allowed, only numeric numbers and no negative integer.
HTML:
<input type="numeric" id="usrid" name="usrid" placeholder="Enter number">
Javascript:
$(document).ready(function() {
$("#usrid").numeric();
});
You can use the type="number" and min=0 attributes in your input to enforce validation on these fields:
<input type="number" id="usrid" name="usrid" min=0 placeholder="Enter number">
However, this won't prevent input of negative or non-numeric characters into the input field. For that you'll need to bind a javascript event:
$('#usrid').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
you can try this
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
in this page you can find more example about of limit of number, in html
http://www.w3schools.com/tags/att_input_max.asp
If you want to take only the number input then input type should be number like following
<input type="number" id="usrid" name="usrid" placeholder="Enter number">
but it takes the letter 'e' which is stands for exponential value.Better you have try the following which use js to validate the input using on 'keypress'
HTML code:
<input type="input" id="usrid" name="usrid" placeholder="Enter number">
JavaScript Code:
<script type="text/javascript">
$(document).ready(function() {
$('[id^=usrid]').keypress(validateNumber);
});
function validateNumber(e) {
var key = window.e ? e.keyCode : e.which;
if (e.keyCode === 8 || e.keyCode === 46
|| e.keyCode === 37 || e.keyCode === 39) {
return true;
}
else if ( key < 48 || key > 57 ) {
return false;
}
else return true;
};
</script>

making variable a number

I have a text box that I want a person to add a number, and only a number into. How would I make a function that, if the value added to the text box was not a number, they would get an alert that said, "must add a number", or something similar. without using RegEx!
thanks!
http://www.w3schools.com/tags/att_input_type.asp
You want to use type="number" on your input field
Type a number:
<input type="number"/>
Here is a solution that you can use to only allow the user to enter numbers, they can´t add anything that´s not a number
<HTML>
<HEAD>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
</BODY>
</HTML>

Categories