input box taking numeric value in firefox - javascript

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;
}

Related

Operation in every browser the same way

I have problem. This code works well only in Google Chrome. I need it to work well in any other browser. Does anyone know how to do it and help me? I need the code to work well in firefox. Because when you open a script in the Firefox browser, the key (TAB) is detected as a letter. and I can not freely switch between columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" ></script>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" >
function preventNonNumericalInput(e){var n=void 0===(e=e||window.event).which?e.keyCode:e.which;String.fromCharCode(n).match(/^[0-9,\b,-]+$/)||(alert("WPISZ LICZBĘ"),e.preventDefault())}!function(n){n.fn.average=function(){var e=0;return this.each(function(){e+=parseFloat(n(this).val())}),e/n(this).length}}(jQuery),$(document).ready(function(){$(":reset")}),$(document).ready(function(){$("#calc").click(function(){var e=$("input[type='number']").average();console.debug(e),$("#result").html(e)}),$(".reset").on("click",function(){$("#result").html(" ")})});
</script>
<h1>Oblicz średnią:</h1>
<form action="">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<div id="result" type="reset" ></div><br>
<input type="button" id="calc" value="Licz">
<input type="reset" value="Reset" class="reset">
</form>
</body>
</html>
So, you've put a bit of Javascript to disallow the user to use anything else than numerical inputs into the form, right ? Hence pressing any other key than the 0-9 one while in the input launch your alert : "WPISZ LICZBĘ".
First of all, you want to "unminify" your unreadable Javascript line.
function preventNonNumericalInput(e) {
var n = void 0 === (e = e || window.event).which ? e.keyCode : e.which;
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || (alert("WPISZ LICZBĘ"), e.preventDefault())
}! function(n) {
n.fn.average = function() {
var e = 0;
return this.each(function() {
e += parseFloat(n(this).val())
}), e / n(this).length
}
}(jQuery), $(document).ready(function() {
$(":reset")
}), $(document).ready(function() {
$("#calc").click(function() {
var e = $("input[type='number']").average();
console.debug(e), $("#result").html(e)
}), $(".reset").on("click", function() {
$("#result").html(" ")
})
});
This line :
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || (alert("WPISZ LICZBĘ"), e.preventDefault())
Reads the input and sees if it is a number (0-9) or an hyphen. If you add || e.keyCode == 9 it lets you use the tab button.
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || e.keyCode == 9|| (alert("WPISZ LICZBĘ"), e.preventDefault())
But you'll still have problem, like in Chrome you can use up and down arrows to increase or decrease the amount, while in Firefox this gives you an error.
Try this
function preventNonNumericalInput(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
JSFiddle for reference

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>

Javascript not working while browsing from Android device

I have a javascript function in a php file to restrict users from entering only numeric data into textbox which is working fine in chrome from Windows machine. But it is not working while browsing from an Android device using same chrome browser. Already checked that Javascript is enabled in the chrome in the Android Device.
The Javascript in the HEAD section of the php file is like this
<script type="text/javascript">
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</script>
Then the textbox
<input type="text" id="text1" name="text1" onkeypress="return isNumber(event)" />
Thanks in advance for any help or workaround
<script>
document.getElementById('text1').onkeydown = function(event){
var result = isNumber(event);
console.log(result);
}</script>

Reference function inside seperate javascript file on window.load

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;
}
});

Why isn't the value being printed?

Here's the short code:
<!DOCTYPE html>
<script type="text/javascript">
function myKeyPress(e)
{
var keynum;
var list;
if(window.event)
{
keynum = e.keyCode;
list = keynum;
if(list == 115)
{
alert("You pressed the 'S' key.");
}
}
}
</script>
<form>
<input type="text" onkeypress="myKeyPress(event);"/>
</form>
When I hit a key, myKeyPress should be called and the event should be passed to the function. In the function body, e (the event parameter) should fetch the Keynum and obtain the input value. That value should be 115 if I were to press 'S' on the keyboard. List should then have the value of Keynum, and list is checked to see if its value is equal to 115 (it should be). If so, it should alert the corresponding text in a message box on the screen. It doesn't do it though. Why?
Here is a shortened version of your code:
function myKeyPress(e) {
var keynum = e.which ? e.which : e.keyCode;
alert(keynum); // Just to see all key presses, remove when done :)
if (keynum == 115) {
alert("You pressed the 'S' key.");
}
}
I am binding it using JavaScript not using an HTML attribute:
document.getElementById('example').onkeypress = myKeyPress;
So I added an ID:
<input type="text" id="example" />
I find that this works. I'm not sure why you were testing window.event in your code?
s key is nr 83 and not 115.
you could find out like this with jQuery.
<script type="text/javascript">
$('#myinput').on('keyup',function(e){
console.log(e.keyCode);
});
</script>
<input type="text" id="myinput" />

Categories