I found this solution which only accepts number in input.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input type="text" name="someid" onkeypress="return isNumberKey(event)" />
I tried to apply this in Vue way:
new Vue({
el: '#app',
methods: {
isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<input type="text" name="someid" #keypress="return isNumberKey($event)" />
</div>
And I get this error: avoid using JavaScript keyword as property name: "return" in expression #keypress="return isNumberKey($event)"
So, how do I make this work?
JSFiddle: http://jsfiddle.net/xr69Lhaw/1/
Vue element bindings will evaluate expressions, but an expression using the return keyword makes it impossible for Vue to execute, correctly.
Vue bindings are happy taking method references. So what you'd technically want is:
<input type="text" name="someid" #keypress="isNumberKey" />
Notice that we also removed the expression actually invoking isNumberKey($event). Simply, providing a reference to the method, Vue will call isNumberKey and pass it an Event object as the first argument.
Now, I'm not sure if simply returning false will cancel the keypress (if it does, please leave me a comment). But I'm sure that using preventDefault() will do the trick, so you could technically rewrite your function as follows:
isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
evt.preventDefault();
}
Related
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>
I have a JavaScript function that prevents a user from typing any character but numbers and a period. I also am trying to prevent a user from typing multiple periods. From my observations of how this script is working, if a user types a period and then a number (".1"), they won't be able to type anymore periods after nor before that until the first one is removed. Yet for some reason the user can type two or more consecutive periods ("..") without the function preventing it. Interestingly, that causes the function to not find any decimals and thus allows the user to type as many decimals as their heart desires. Here is the code I am working with:
function isNumberKey(evt){
if (evt.keyCode == 0) {
var charCode = evt.charCode;
if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
return false;
} else {
if (charCode == 46) {
if (document.getElementById('inputBox').value.includes(".") == true) {
return false;
} else {
return true;
}
} else {
return true;
}
}
}
}
<form name="form" id="form" onsubmit="calculate(); return false;" accept-charset="utf-8">
<input type="number" onkeypress="return isNumberKey(event)" value="0" min="0" id="inputBox">
</form>
Feel free to play with it. Maybe I am not using the right thing to find the period. What am I doing wrong here? Why is it allowing a period to be typed right after another period is already present?
I don't know if this has anything to do with it, but I am on the latest Firefox on Ubuntu 16.04 LTS.
It is because you declared this input as number, so '.' are being removed from its value. Just change input type to text:
function isNumberKey(evt){
if (evt.keyCode == 0) {
var charCode = evt.charCode;
if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57))) {
return false;
} else {
if (charCode == 46) {
if (document.getElementById('inputBox').value.includes(".") == true) {
return false;
} else {
return true;
}
} else {
return true;
}
}
}
}
<form name="form" id="form" onsubmit="calculate(); return false;" accept-charset="utf-8">
<input type="text" onkeypress="return isNumberKey(event)" value="0" min="0" id="inputBox">
</form>
Your entire isNumberKey function is included inside an if statement that checks if the event's keyCode is zero. When you type a period, the keyCode is 46. So your logic never gets executed.
As a side not, KeyboardEvent.keyCode is deprecated; you shouldn't use it. MDN recommends using KeyboardEvent.key instead.
As guijob said, you should also change the input's type to text.
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>
I have the following function which only allows for numerical characters to be entered in to the textbox. This is located inside common.js along with other global functions.
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
Now inside another javascript file I have the following code, what I'm trying to achieve is bind the on keypress event of the textbox mobilenumber to the function mentioned above located in the common.js file I have made a reference to that common.js as follows:
/// <reference path="common.js" />
window.onload = function () {
document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);
};
But the error I receive is
isNumberKey is not defined $('mobilenumber').keypress = isNumberKey(this.keypress);
When I view source to check the naming conventions this is how it is rendered:
<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">
I'm not sure where I'm going wrong with this? any help would be appreciated.
Update
Ok so I moved both javascript files into one file called common as shown here:
$(document).ready(function () {
document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
});
When the page load instead of binding it, it calls it which gives me an error saying evt if undefined which I understand because nothing has been entered, why is it calling it? and how can I just bind it without having to call it?
Try
$("#mobilenumber").on("input", function(e) {
return $(this).prop("value", function(_, val) {
return val.replace(/[^\d]/, "").slice(0, 15)
})
});
$("#mobilenumber").on("input", function(e) {
return $(this).prop("value", function(_, val) {
return val.replace(/[^\d]/, "").slice(0, 15)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">
JavaScript has no import, include, or require. There are other ways
for JavaScript to include external JavaScript contents, though...
From: How do I include a JavaScript file in another JavaScript file?
Perhaps try keeping both the function and the attachment of the event handler in one file.
You may like to check this:
http://jsfiddle.net/fq7Lkkyp/
$(document).ready(function () {
$("#mobilenumber").keypress(isNumberKey);
function isNumberKey() {
alert('check');
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
event.preventDefault();
return false;
}
return true;
}
});
Using this code, user won't enter numeric value. In Google Chrome, input box is not taking numeric value but in Firefox it takes. I'm not getting, why it is happening. Any help appreciated.
<input type="text" name="station_name" id="station_name" onKeyPress="return noNumbers(this)" maxlength="45" />
this is my javascript function
<script type="text/javascript" language="javascript">
function noNumbers(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if((charCode>=65 && charCode<=90)||(charCode>=97 && charCode<=122)||(charCode==32))
return true;
return false;
}
</script>
This is because, in Firefox, the event is passed as a parameter to the event handler. event property of the window object is IE only.
function enterHere(e)
{
e = e || window.event;
var code = e.keyCode || e.which;
if(code == 13)
find();
}
you are passing this in the following line, pass event
<input type="text" name="station_name" id="station_name" onKeyPress="return noNumbers(event)" maxlength="45" />
EDIT
ok try the follwoing function and the input tag as above:
function noNumbers(evt)
{
var charCode = evt.keyCode || evt.which;
if((charCode>=65 && charCode<=90)||(charCode>=97 && charCode<=122)||(charCode==32)||||(charCode==8))
return true;
return false;
}