Develop Reference

javascript onkeydown not working in numeric keypad

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;"/>

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">

ng-keyup does not detect android backspace

I'm trying to use ng-keyup in my application, but there's a problem on android backspace.ng-keyup doesn't seem to detect the android backspace. How can i fix this?
I want to show a error message if a number is started with "3" max length of tht number should be 15. if else can allow 16.
html
<div class="form-group" ng-class="{ 'has-error' : submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )}">
<label class="labelColor"><h5><b>Beneficiary Account/Card Number*</b></h5></label>
<input ng-keyup="validateCreditCard();" ng-disabled="data.origin.account == ''" onkeypress="return ((event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || event.charCode == 8 || event.charCode == 45 || event.charCode == 32 || (event.charCode >= 48 && event.charCode <= 57))" type="text" id="beneAcc" name="beneAcc" ng-model="data.beneAcc" class="form-control" ng-blur="validateDesitinationAccount(data.origin, data.beneAcc);" required>
<span class="help-inline" ng-show="submitted && (thirdPartyForm.beneAcc.$pristine || thirdPartyForm.beneAcc.$invalid )">Beneficiary Account No cannot be left blank.</span>
<span class="help-inline" ng-show="validateAccFlag" style="color:red" >{{validateMsgStr}}</span>
<span class="help-inline" style="color:red;" ng-if="LkrValidation">You cannot transfer Sri Lankan Rupees to foreign currency accounts.</span>
<span class="help-inline" style="color:red;" ng-show ="accountNoFlag">{{accountNoValidateMsg}}</span>
</div>
It shows the error message successfully but the problem is if i delete a number using backspace, the validation won't disappear.
NOTE: android backspace works when i'm typing characters But do not work when i type numbers.

I was also facing the same issue. I used ng-change instead of ng-keyup/ng-keydown and it worked for me. Hope it helps you too.

Which event should be used on text box to call javascript function?

I'm having two text boxes to store two dates. I want to call a javascript function upon entering date into the first and second textbox. That is as soonas I enter the date in second box I want to call the javascript function. I tried onchange but it is not calling the javascript function. Can you suggest me the right event to call the javascript function? Thanks in advance. I'm using smarty. My code is as follows:
<label>Created Date From</label>
<div class="form-element">
<input type="text" class="cal fl-left" name="from_date" id="frmDate" value="{if $data.from_date}{$data.from_date}{else}{/if}" maxlength="10" />
</div>
<label>Created Date To</label>
<div class="form-element">
<input type="text" class="cal fl-left" name="to_date" id="toDate" value="{if $to_date}{$to_date}{else}{/if}" maxlength="10" onchange="get_tests_by_date(); return false;"/>
</div>
Javascript code is as follows:
function get_tests_by_date() {
document.location.href = "view_tests.php?test_category_id="+document.getElementById('test_category_id').value+"&test_mode="+document.getElementById('test_mode').value+"&test_type="+document.getElementById('test_type').value+"&package_type="+document.getElementById('package_type').value+"&created_date_from="+document.getElementById('frmDate').value+"&created_date_to="+document.getElementById('toDate').value+"&page=1";
}

This is what i ended up doing years ago, no jquery in this code:
HTML:
<input name="FormStartDate" value="" maxlength="10" onkeydown="KeyDateNumCheck()"/>
<input name="FormEndDate" value="" maxlength="10" onkeydown="KeyDateNumCheck()"/>
JS:
//do not allow to input anything except the numeric characters, dashes, or slashes
function KeyDateNumCheck()
{
var iKeyCode = event.keyCode;
if ( (iKeyCode != 109) && (iKeyCode != 189) && (iKeyCode != 111) && (iKeyCode != 191) &&
( ((iKeyCode > 57)&&(iKeyCode < 96)) || (iKeyCode > 105) || (iKeyCode == 32)) )
event.returnValue = false;
}

Put label next to the input

I have a simple case. I want two things.
Put label next to the input.
Some sort of validation, only digit number for the text box.
The corresponding link is here.
Now the input is below the label.
My code:
<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block; width: 400px;">
How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
<option value="sameAsID">Same as ID</option>
<option value="appendID">AppendID</option>
</select>

Demo: http://jsfiddle.net/GCtPE/25/
label, input { display: inline-block; }
For verification you will have to use javascript since HTML5 isn't fully supported by all browsers. HTML5 is pretty cool though.

First, remove the "inline-block" from your label and add the for attribute like so:
<label for="newInmateCount" style="width: 400px;">How many?</label>
As for the input, do this for numeric only:
$("#newInmateCount").keydown(function(e) {
if (e.which == 8 || e.which == 46) return true; // for backspace and delete
if (e.which < 48 || (e.which > 57 && e.which < 96) || e.which > 105) return false;
});
See your jsFiddle Updated

Remove the display: inline-block. That is causing the input filed to go to new line.
You this js function to validate just digits, call it onkeypress event of the input field or bind it with onkeydown event
function onlyNumbers(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
jsFiddle demo

to put the label next to the input, change display:inline-block; to display:inline, or decrease the width:400px to a lower value until you acheive the positioning you want. for validation you need to do some reading on regular expressions

jsfiddle here
The input was so far to the right because you set the width of the label to 400px, I just removed that and it looks fine now. Also added some quick validation, you'd obviously have to run the validation when the form is submitted.
<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block;">
How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
<option value="sameAsID">Same as ID</option>
<option value="appendID">AppendID</option>
</select>
</div>​
And the JS is below:
if($('#newInmateCount').val() != "") {
var value = $('#newInmateCount').val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var intRegex = /^\d+$/;
if(!intRegex.test(value)) {
errors += "Field must be numeric.<br/>";
success = false;
}
} else {
errors += "Field is blank.</br />";
success = false;
}​

On-submit validation is pretty easy with jQuery. Here's an example. If you want to keep it from ever having something other than numbers in it, you can go with an onchange or onkeyup event and simply strip the numbers from the input.
For the positioning, try inline instead of inline-block.