I have a function below where it doesn't allow the user to type in letters in a textbox but it keeps saying event is undefined. Where and how am I suppose to define event?
Below is the function:
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Below is the html where this could be used:
onkeypress="return isNumberKey(event)"
change
var charCode = (evt.which) ? evt.which : event.keyCode
to
var charCode = (evt.which) ? evt.which : evt.keyCode
or if you are using jQuery (you tagged it but aren't using it) you could do
$('#textareaid').keypress(function(e) {
if (e.which > 31 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
}
});
where your html is
<textarea id="textareaid"></textarea>
See event.preventDefault()
Note on how to get key pressed using jQuery
To determine which character was entered, examine the event object
that is passed to the handler function. While browsers use differing
properties to store this information, jQuery normalizes the .which
property so you can reliably use it to retrieve the character code.
Taken from the .keypress() docs
here is the code which should work:
function checkerFunction(e){
var charCode=e.which || e.keyCode;
if(charCode<=31 || charCode>=48 && charCode<=57)return true;
return false;
}
and the event binding should be
onkeypress="return checkerFunction(window.event)"
For the record I think that most of the answers above don't take into consideration the ARROW keys.
This should be how it works incase you are googling this.
function isNumberKey(event)
{
var charCode = event.charCode;
if ((charCode < 48 || charCode > 57) && charCode != 0){
return false;
}
return true;
}
Related
Here I have a function which only allows numeric and percentage. But it is allowing minus(-), I want to restrict that minus in that script. How can I restrict.Here is my script.Or please suggest me a dirctive for this.
function validateQty(el, evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 45 && charCode != 8 && charCode != 37 && (charCode != 46) && (charCode < 48 || charCode > 57))
return false;
if (charCode == 46) {
if ((el.value) && (el.value.indexOf('.') >= 0))
return false;
else
return true;
}
return true;
var charCode = (evt.which) ? evt.which : event.keyCode;
var number = evt.value.split('.');
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
};
You can allow what you want to be as input. Do something like this.
function restrictInput(el) {
el.addEventListener('input', function(e) {
if (!e.target.value.match(/^\d+$|%$/)) {
e.target.value = e.target.value.slice(0, -1)
}
console.log(e.target.value);
})
}
restrictInput(document.getElementById("input1"));
restrictInput(document.getElementById("input2"));
<input id="input1">
<input id="input2">
updated: As asked by OP. A generic function to handle inputs.
NOTE: You can add more restrictions as you want inside this function
You could use input=number
<input type="number" min="0" />
Using javascript you could do:
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function () {
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null) {
// If we have no match, value will be empty.
this.value = "";
}
}, false)
If the data from the input field will be sent to the server, make sure to add this validation on the server too.
I think you can simplify your script by just testing it against a regular expression.
So your function would essentially change to something like this
function validateQty(el, evt)
{
var regex = new RegExp(/^\d+$|%$/);
return regex.test(el.value);
};
JSFiddle
In asp.net textbox I have called a javascript function which I wrote to restrict only 'digits' entry in text box but I also want to allow '+' sign but can't solve it.
This is what I have tried so far.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
Just reverse your condition and add the ASCII code for + which is 43 to return true
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if ((charCode >=48 && charCode <= 57) || (charCode == 43))
return true;
return false;
}
If you were able to restrict digits, you can also enter '+', I guess you need ASCII table and corresponding value i.e. how you were restricting digits, and charCode > 31 seems useless if you are checking for digits only:
http://www.asciitable.com/
so if you want to check for +
charCode != 43
You need to check for + as well explicitly, modify your if to :
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43)
Here is working example:
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 43) {
return false;
}
return true;
}
<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />
Working Demo
Ascii Table
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 43) {
return false;
}
return true;
}
I'm looking for a solution for a (as it seems) common problem.
I want JavaScript to check a specific format when entering data in a input-field.
This is what I've got:
HTML:
<input onkeypress=" return fieldFormat(event)">
JavaScript:
<script type="text/javascript">
//Checks spelling in realtime, if JavaScript is enabled.
function fieldFormat(event){
var charCode = (window.event) ? window.event.keyCode : event.keyCode;
var parts = event.target.value.split('.');
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)) || (parts.length > 1 && charCode == 46))
return false;
return true;
}
</script>
This works fine in Chrome and IE. But for some reason, Firefox gives me troubles ^^
Any hints?
Some browsers use keyCode, others use which, so try this:
function fieldFormat(event){
var e = event || window.event,
charCode = e.keyCode || e.which,
parts = e.target.value.split('.');
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)) || (parts.length > 1 && charCode == 46))
return false;
return true;
}
Check this one - seems like it's common https://support.mozilla.org/pl/questions/998291
I want to copy paste numeric values in this field, can we achieve this keeping onkeypress as it is?
HTML:
<input type="text" onkeypress="return allowNumOnly(event);">
Javascript:
function allowNumOnly(evt)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
console.log(charCode);
if(charCode==36 || charCode==46 || charCode==37 || charCode==39)
return true;
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
I am using the JavaScript to disable keyboard if checkbox is not checked and to enable only numbers if checkbox is checked.
My code is.
<script type="text/javascript">
function isNumberKey(evt)
{
if(document.getElementById("check1").checked=false)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
else
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 1 && charCode < 127)
return false;
return true;
}
}
</script>
HTML code
<asp:CheckBox ID="check1" runat="server"/>
<asp:TextBox ID="tbxt1" runat="server" MaxLength="6" Width="200" onkeypress="return isNumberKey(event);" TextMode="Password" autocomplete="off" />
In default as checkbox is not checked so JavaScript is not allowing me to use my keyboard. This is fine. When I change my checkbox status to checked and tried pressing a key. OnKeyPress event the checkbox status is changing to unchecked. Is there anything wrong in my code?
You have a bug in your code, you need double equlas == to check an equality in javascript.
Like this:
if(document.getElementById("check1").checked==false)
Also, it can be very confusing to somebody else to read your code if you don't contain all conditional stuff within a pair of curly braces, even when it's a single line.
So I'd refactor it ever so slightly to be like this (just for clarity, I haven't really changed anything):
<script type="text/javascript">
function isNumberKey(evt)
{
if(document.getElementById("check1").checked==false)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
return false;
}
else
{
return true;
}
}
else
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 1 && charCode < 127)
{
return false;
}
else
{
return true;
}
}
}
</script>