Disable Keyboard Shotcuts - javascript

I have a "textarea". I want to make a calculator but before starting I need to be sure that everything is working well.
If I press the '1' key it works. If I press the '/' key it opens 'fast search'.
When I am in Google Chrome I can't use the "+ and - " what can I do?
function doc_keyUp(e) {
if (e.altKey && e.keyCode == 13 || e.keyCode == 49) {
document.getElementById("area").value += "1";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 50) {
document.getElementById("area").value += "2";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 51) {
document.getElementById("area").value += "3";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 52) {
document.getElementById("area").value += "4";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 53) {
document.getElementById("area").value += "5";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 54) {
document.getElementById("area").value += "6";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 55) {
document.getElementById("area").value += "7";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 56) {
document.getElementById("area").value += "8";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 57) {
document.getElementById("area").value += "9";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 48) {
document.getElementById("area").value += "0";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 61) {
document.getElementById("area").value += "+";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 191) {
document.getElementById("area").value += "/";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 173) {
document.getElementById("area").value += "-";
$('#area').val(textVal.substring(0, texVal.length = 1));
}
}
document.addEventListener('keyup', doc_keyUp, false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="area" onKeyPress="return validateKey(event)"></textarea>

For "+" and "-" try to use key codes 187 and 189.
event.preventDefault(); - should prevent open 'fast search'.
<!DOCTYPE html>
<html>
<body>
<textarea id="area"></textarea>
<script>
function doc_keyUp(e) {
if (e.altKey && e.keyCode == 13 || e.keyCode == 49) {
document.getElementById("area").value += "1";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 50) {
document.getElementById("area").value += "2";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 51) {
document.getElementById("area").value += "3";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 52) {
document.getElementById("area").value += "4";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 53) {
document.getElementById("area").value += "5";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 54) {
document.getElementById("area").value += "6";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 55) {
document.getElementById("area").value += "7";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 56) {
document.getElementById("area").value += "8";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 57) {
document.getElementById("area").value += "9";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 48) {
document.getElementById("area").value += "0";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 187) {
document.getElementById("area").value += "+";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 191) {
document.getElementById("area").value += "/";
}
if (e.altKey && e.keyCode == 13 || e.keyCode == 189) {
document.getElementById("area").value += "-";
}
e.preventDefault();
}
document.addEventListener('keyup', doc_keyUp, false);
</script>
</body>
</html>

Related

jQuery to only accept values between 1 and 100 in contenteditable element

How can I go about only allowing values between 1 and 100 in my HTML table td cells,
Currently, I have a jquery function only allowing numbers,
//only allow numbers in td
$(".allow_only_numbers").keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
However, I only want values ranging from 1-100
The td is content editable and cells I only want to contain such values have a class called allow_only_numbers e.g
<td contenteditable='true' class="allow_only_numbers">-</td>
I would do something like this
$(".allow_only_numbers").keydown(function (e) {
if($(".allow_only_numbers").innerText < 100 && $(".allow_only_numbers").innerText >= 1 ) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
else if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
} else alert('number out of range')
});

Using OnkeyDown as an if condition Javascript

I would like to use .onkeydown to restrain my input field. I wrote this function, but I'd like to use it in an if condition, to check if entry keys are right or wrong.
But I don't know how form should I use in my if to call this function, because actually it's not really an Angular scope function, but a JS one...
var cpNumber = document.getElementById("cpNumber");
cpNumber.onkeydown = function(e) {
if((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 65))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 65))
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 66))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 66))
|| e.keyCode == 8) {
return true;
} else {
return false;
}
};
// If condition, check if entry keys are wrong.
// I tried cpNumber.onkeydown(e), but the "e"
// seems drop from the sky, it always shows "false".
if(cpNumber.onkeydown(e) === false) {
alertPopup = $ionicPopup.alert({
title: 'Oups...',
cssClass: 'pop',
template: '<div class="center-form">This is Wrong !</div>'
});
}
<form>
<input class="input"
type="text"
id="cpNumber"
maxlength="5"
ng-model="cp"
placeholder="CP">
</form>
You need to put the calls in the blocks themselves. Here's a fiddle for you to look at:
https://jsfiddle.net/tsamzx6h/
if((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 65))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 65))
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 66))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 66))
|| e.keyCode == 8)
{
alert("Good!");
}
else
{
alert("Wrong");
}
Event cannot be called this way. For making your program functional you can add a function in your else block and call it and do whatever you want.
PLUS you can also pass your event to function. So that will serve as an added advantage.
HTML:
<form><input class="input" type="text" id="cpNumber" maxlength="5" ng-model="cp" placeholder="CP"></form>
Script::
ar cpNumber = document.getElementById("cpNumber");
cpNumber.onkeydown = function(e) {
if((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 65))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 65))
|| ((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCorde == 66))
|| ((e.keyCode > 47 && e.keyCode < 58)
|| (e.keyCode == 66))
|| e.keyCode == 8)
{
return true;
}
else
{
notAllowed(e);
}
};
// If condition, check if entry keys are wrong. I tried cpNumber.onkeydown(e), but the "e" seems drop from the sky, it always shows "false".
function notAllowed (ev) {
alertPopup = $ionicPopup.alert({
title: 'Oups...',
cssClass: 'pop',
template: '<div class="center-form">This is Wrong !</div>'
});
}

Issue In Adding Class To TextBox Using Jquery

Basically I'm working on a simple functionality. But stuck on a part when I try to addClass to any HTML Element it's not working.
I've two HTML elements
Dropdown for DocType
TextBox for DocNumber.
Based on selected value in DocType I need to change class for DocNumber which will handle validation part for DocNumber textBox.
Here is code of my script.
$(document).ready(function () {
$(".number").keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
$('#ddlDoctype').on('change', function () {
var validateCriteria = $(this).find("option:selected").val();
if (validateCriteria == "A") {
$("#txtDocNumber").addClass("minSize[8]");
$("#txtDocNumber").addClass("number");
$("#txtDocNumber").removeClass("minSize[12]");
} else if (validateCriteria == "E") {
$("#txtDocNumber").addClass("minSize[12]");
$("#txtDocNumber").removeClass("minSize[8]");
$("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
$("#txtDocNumber").removeClass("number");
} else {
$("#txtDocNumber").removeClass("number");
}
});
Here a good thing to notice is that when I add minSize[8] to textbox it gets assigned but number class is not getting assigned to the textbox. When I added that part in watch I get a result that number class is getting assigned but it's not working and allowing user to enter alphabets too.
I can't get out of it even after trying many ways to solve this. If any help is possible then I'll be grateful to you.
You need to put change event in document ready and need to register keydown event of .number with on.
$(document).ready(function () {
$(document).on('keydown', '.number', function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
$('#ddlDoctype').on('change', function () {
var validateCriteria = $(this).find("option:selected").val();
if (validateCriteria == "A") {
$("#txtDocNumber").addClass("minSize[8]");
$("#txtDocNumber").addClass("number");
$("#txtDocNumber").removeClass("minSize[12]");
} else if (validateCriteria == "E") {
$("#txtDocNumber").addClass("minSize[12]");
$("#txtDocNumber").removeClass("minSize[8]");
$("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
$("#txtDocNumber").removeClass("number");
} else {
$("#txtDocNumber").removeClass("number");
}
});
});
As per provided fiddle, You have forgot two thing
1. You have missed jquery library
2. $('#ddlDocType') should be inside $(document).ready
check updated snippet below..
$(".number").keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 40)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
$('#ddlDocType').on('change', function () {
var validateCriteria = $(this).val();
if (validateCriteria == "A") {
$("#txtDocNumber").addClass("number");
} else if (validateCriteria == "E") {
$("#txtDocNumber").addClass("number");
} else if (validateCriteria == "C") {
$("#txtDocNumber").removeClass("number");
} else {
$("#txtDocNumber").removeClass("number");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Document Type:
<select id="ddlDocType">
<option value="A">Pan</option>
<option value="E">Adhar</option>
<option value="E">Passport</option>
<option value="D">Driving Licence</option>
</select>
</br>
</br>
Document Number: <input type="text" name="docNum" id="txtDocNumber"><br>

Javascript validation for ñÑ characters works on chrome but not on firefox

I'm working on ASP.Net, i have a WebForm with a link to a javascript file which contains the following function:
$(".string").keydown(function (e) {
var x = (e.charCode) ? e.charCode : ((e.which) ? e.which : e.keyCode);
if ($.inArray(e.keyCode, [46, 8, 27, 16, 13, 32, 192, 9, 209, 241]) !== -1 ||
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
return;
}
if (e.keyCode < 65 || e.keyCode > 90) {
e.preventDefault();
}
});
This successfully allows me to type the ñÑ (209, 241) characters on Chrome but fails to do so on Firefox, i saw that you should use e.which when dealing with Firefox but it doesn't work. I'm not too good with javascript so, what am i not understanding here?
With the help of mister Lee Jenkins I realized fixing my code like this was enough to fix the issue, thx a lot! Just needed to add (e.key == "ñ" || e.key == "Ñ") ||
$(".string").keydown(function (e) {
var x = (e.charCode) ? e.charCode : ((e.which) ? e.which : e.keyCode);
if ($.inArray(x, [46, 8, 27, 16, 13, 32, 192, 9, 209, 241]) !== -1 ||
(e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) ||
(e.key == "ñ" || e.key == "Ñ") ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
return;
}
if (e.keyCode < 65 || e.keyCode > 90) {
e.preventDefault();
}
});

how to enter only numeric values in ipad text box?

I have a problem restricting a text box to only numeric values. I used normal methods but it works only in windows, not working in ipod and it allows a user to enter strings and special characters. , if you know how to restrict this on iOS pls help ,
check it....
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || event.keyCode == 116 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
((event.keyCode >= 35 && event.keyCode <= 45) || event.keyCode == 190 || event.keyCode == 100 || event.keyCode == 110)) {
if ((event.keyCode == 190 || event.keyCode == 100 || event.keyCode == 110) && $(this).val().indexOf('.') != -1) {
event.preventDefault();
}
else {return;}
}
else {
// Ensure that it is a number and stop the keypress
if ((event.keyCode >= 219 && event.keyCode <= 222) || (event.keyCode >= 106 && event.keyCode <= 109) || event.keyCode == 111
|| event.keyCode == 32 || event.keyCode == 59 || (event.keyCode >= 186 && event.keyCode <= 189) || event.keyCode == 191 || event.keyCode == 192 ||
event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || (event.keyCode > 105 && event.keycode < 190 )) ){
/*
if (checker.apple) {
// alert('Hh');
alert(event.keyCode);
//$.browser.apple=true;
event.shiftKey || (event.keyCode <= 48 || event.keyCode >= 57) && (event.keyCode < 96 || (event.keyCode > 105 && event.keycode < 190 ))
event.preventDefault();
}*/
//alert(event.keyCode);
/*event.preventDefault();
}
}
Limit the user to only type In Numbers:
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string
{
if ([string length] == 0 && range.length > 0)
{
textField.text = [textField.text stringByReplacingCharactersInRange:range withString:string];
return NO;
}
NSCharacterSet *nonNumberSet = [[NSCharacterSet characterSetWithCharactersInString:#"0123456789"] invertedSet];
if ([string stringByTrimmingCharactersInSet:nonNumberSet].length > 0)return YES;
return NO;
}
You can use onkeypress() when user presses any button and fire checkAlpha() function.
and use following code to detect whether it is a number or a alphabet
function checkAlpha() {
x = event.charCode;
if (( x >= 65 && x <=90) || (x >= 97 && x <=122))
{
alert("Yes, it is alphabet");
}
else
{
alert("Sorry, only alphabet allowed");
event.preventDefault();
}
}
works fine latest android and desktop please confirm on apple devices and let me know.
please follow this code for enter only numeric value in text box. make sure for these DELEGATE methods
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
char *x = (char*)[string UTF8String];
//if(DEBUG_MODE) NSLog(#"char index is %i",x[0]);
if([string isEqualToString:#"0"] || [string isEqualToString:#"1"] || [string isEqualToString:#"2"] || [string isEqualToString:#"3"] || [string isEqualToString:#"4"] || [string isEqualToString:#"5"] || [string isEqualToString:#"6"] || [string isEqualToString:#"7"] || [string isEqualToString:#"8"] || [string isEqualToString:#"9"] || x[0]==0 ) {
NSUInteger newLength = [textField.text length] + [string length] - range.length;
return (newLength > 6) ? NO : YES;
} else {
return NO;
}
}

Categories