javascript onkeydown not working in numeric keypad - javascript

I am having a problem while entering the number values from the Num pad.My script is only accepting numbers from the number keys above the 'qwerty' keys. What I want is that user can also enter numbers from numeric keypad. Following is the HTML:
<td style="border: 1px solid #ddd;background-color:#E5E4E2;">
<input type="text" name="qty_enter[]" id="qty_enter0" onkeyup="sum(0),itc_details(0),prevent_zero(0),advance_seeting1();" onkeypress="copyValue2(1)" onkeydown="return isNumberKey(event)" style="width: 65px;outline: none;border: none; background: transparent;"/>
</td>
However I tried to call the script on onkeypress and onkeyup functions but it's not working because I have already called function over there. Here is the script below for only accepting numerical values.
Also I have double checked the Num Lock and that's not the issue.
<script>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
Any help would be appreciated. Thank you.

Because numlock numbers keycode is different normal number keys.
Ex keycode 48=number 0, when Numlock 0 = keycode 96;
Look this article .
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
console.log("KeyCode: "+charCode);
if (charCode >= 96 && charCode <= 106 )
console.log("Numlock number detected: "+charCode);
}
<td style="border: 1px solid #ddd;background-color:#E5E4E2;">
<input type="text" name="qty_enter[]" id="qty_enter0" onkeydown="isNumberKey(event)" style="width: 65px;"/>
</td>

Your function is actually written to block the num pad from entering any key.
Reverse the return false with true and vice versa to enable nums but disable letters and everything else.

Hey I got answer for my question after 3-4 days long. Script was ok. It was pretty simple I just changed event as shown in below.
<input type="text" name="qty_enter[]" id="qty_enter0" onkeyup="sum(0),itc_details(0),prevent_zero(0),advance_seeting1();" onkeypress="return isNumberKey(event)" onkeydown="copyValue2(1)" style="width: 65px;outline: none;border: none; background: transparent;"/>

Related

How to change specific ASCII Charfacter to space character before submit a form

I have the below code to recognize the special ASCII codes before submit the form. How can I set condition to change that ASCII codes with character space? For example, I don't want the user enter ; and I want to change this character with space.
Here is my code :
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48))
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="#">
<input name="mastername" type="text" onkeypress="return isNumberKey(event)">
<input type="submit" value="submit">
</form>

html multiple functions for "onkeypress" attribute

I have this HTML text input as below
<label style="color: white;" for="id">ID:</label>
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="9" name="id" id="id">
Now, in the onkeypress I successfully added so only numbers can be entered.
but I have a JavaScript function called:
function checkID() {
and I want that additionally, after every number entered it will call this function. But I just can't get it to do them both (only allow numbers and call the function).
Thanks in advance! Itay.
You can enter the number validation to the checkID function.
<input type="text" onkeypress="return checkID(event,this)" maxlength="9" name="id" id="id">
function checkID(e,elem) {
if !(e.charCode >= 48 && e.charCode <= 57)
return false;
// continue checking the id...
}
Alternatively to attaching your function via html, you can add it using purely javascript:
document.querySelector("your-html-selector").addEventListener("keypress", function(event) {
// all your code here
});
This keeps your html clean and your code easy to read, especially if you're trying to execute multiple functions and such on an event occurring.

Input formatting

I'm using an input type="number"to allow users to put a duration time on a post. The format is days hours:minutes:seconds as the backend provides the format.
What I need to do is to give that format to the input. Is this possible?
You can use input type text with pattern:
<form>
<input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
<input type="submit"/>
</form>
It will validate the text using 1-3 digits for days and 1-2 for hours minutes and seconds.
You can also restrict typing of no digits and colons and space using jQuery:
$(function() {
$('input').keydown(function(e) {
console.log(e.which);
if (!((e.which >= 48 && e.which <= 57) || (e.which == 186 && e.shiftKey) || e.which == 32)) {
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" pattern="^\d{1,3} \d{1,2}:\d{1,2}:\d{1,2}$" placeholder="days hours:minutes:seconds"/>
<input type="submit"/>
</form>
If you have jQuery, then take a look at:
http://jonthornton.github.io/jquery-timepicker/
you can use also
<input type="datetime">

JavaScript form with decimal numbers

I have a form which for now is only accepting integers, how can I have a form which accept decimals?
Also how can I activate a keyboard in HTML that has a keypad and a decimal point?
My JavaScript code for now is this:
var peso = parseInt(form.elements["x"].valueAsNumber);
var eta = parseInt(form.elements["y"].valueAsNumber);
var creatinina = parseInt(form.elements["c"].valueAsNumber);
and for the variables in HTML form, this:
<p align="center" style="font-size:20px">Peso (kg)</p>
<input name="x" type="number" value="70" style="width:100%;height:40px;font-size:15px;" pattern="\d*"/>
The way to handle it is to use an <input type="text"> and add a proper javascript-match.
<input type="text" name="amount" id="amount" maxlength="6" autocomplete="off"/></span>
After any change in this field happened, you could check against a regular expression like that one:
var ok = /^\d*\.?\d*$/.test(input);
If you think the input is correct, everything is fine. If not, you can print a message that this box should accept a decimal.
try this one to make you textbox able to accept only Numbers and decimals.
<HTML>
<HEAD>
<SCRIPT language=Javascript>
<!--
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
return true;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT name="x" style="width:100%;height:40px;font-size:15px;" id="txtChar" onkeypress="return isNumberKey(event)"
type="text">
</BODY>
</HTML>

Can not type anything in FireFox

I experience strange problem in addition to all my other problems. I am creating ASP.NET MVC application. I am using a flexigrid and attempting to use Modal dialogs. In IE, Google Chrome and Opera I can type numbers only in the Client No control, but in the FireFox I am unable to type anything.
This is how that controls renders:
<div id="add-edit-dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: 622px;" scrolltop="0" scrollleft="0">
<form id="add-edit-form" novalidate="novalidate">
<fieldset>
<legend>Client Info</legend>
<input id="fntype" type="hidden" name="fntype" value="">
<input id="ClientId" type="hidden" value="" name="ClientId" data-val-number="The field ClientId must be a number." data-val="true">
<div class="editor-label" style="background-color: rgb(255, 255, 255);">
<div class="editor-field" style="background-color: rgb(255, 255, 255);">
<input id="ClientNumber" class="numericOnly input-validation-error" type="number" value="" name="ClientNumber" data-val-required="The Client No field is required." data-val-remote-url="/Client/doesClientNoExist" data-val-remote-type="POST" data-val-remote-additionalfields="*.ClientNumber,*.ClientId" data-val-remote="Client Number already exists. Please enter a different Client Number." data-val-number="The field Client No must be a number." data-val="true">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="ClientNumber">
I am using my own class numericOnly and type number (which displays as spinner in Google Chrome).
I have CardNumbers.js file where I define numericOnly class this way:
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
The code above I found a while ago in one of the StackOverflow questions and it works Ok in other browsers.
So, do you see what may be wrong here and why I can not type anything but in FireFox only?
Try this solution. I hope this is what you are looking for.
Just change
from
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g))
to
if(String.fromCharCode(e.which).match(/[^0-9]/g))
Try This:
$(document).ready(function() {
$(".numericOnly").keydown(function(event) {
// Allow: backspace, delete, tab, escape, and enter
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
});
This sounds like more of a browser issue. If your Firefox is out of date, try updating through Help > About or at http://getfirefox.com/. I just took it to an HTML testbed in Firefox v18 (latest on release channel), and it worked fine.

Categories

Resources