keyup event does not set event shiftKey JAVASCRIPT - javascript

The function onkeyup works fine with all the characters when both SHIFT key and character are pressed , or keeping SHIFT key pressed and key up the character, but my problem happens when key up the SHIFT key before the character . The value returned is with lowercase characters . So for example if I key up SHIFT and press a, 'a' is returned but not 'A' .
So my question is how do to SHIFT key is being keyup . I've tried the following check but this didn't work :
pass_input_obj[i]['input'].onkeyup = function(event) {`enter code here`
if(event.key == "Process") {
if(event.code.includes("Shift")) keypressed= "Shift";
} else
keypressed= event.key;
if(keypressed == "Shift" || (event.code && event.code.includes("Shift"))) shiftclicked = false;
if(!isSpecialKey(keypressed) && !crtlclicked){
Capletter = keypressed;
if(shiftclicked == true){
Capletter = keypressed.toUpperCase();
}
}

Not sure if I got clear all your needs. I assume you want to press and release 'Shift' button and click any other character. That character then should be capitalized.
Here is my way of implementing it
var inputEl = document.getElementById('txt');
var isPrevShiftClicked = false;
inputEl.onkeyup = function(event) {
if(isPrevShiftClicked) {
inputEl.value = inputEl.value.slice(0, inputEl.value.length - 1) + inputEl.value.charAt([inputEl.value.length - 1]).toUpperCase();
}
isPrevShiftClicked = event.keyCode === 16;
}
<input type="text" id="txt" />

Related

Keyup prevent default not working angular6

I want to stop entering any number after validating a custom regular expression , the issue is condition got true but event.preventDefault is not preventing the input , The reg ex is to input value in percentage between 1-100 with decimals
/^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/
this is my input
<input type='text' (keyup)="preventPercentage($event)" [(ngModel)]="value">
ts
preventPercentage(event){
var p = event.target.value
var s= p.match(/^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/) != null
if(!s && p){
event.preventDefault();
}
}
user can still enter any value even the condition is true
input anything between 100 above it still working and event is not preventing values
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
I used key down but it allows to enter 123 i.e three digit numbers
and I cannot then remove that number using backspace what exactly I am doing wrong can anyone suggest a sol any help will be appreciated
Try this. I think there is a change required in the regex as per your requirement.
preventPercentage(event){
var p = event.target.value + event.key;
var s = p.match(/^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/) != null;
if (!s && event.keyCode !== 8) {
event.stopPropagation();
return false;
}
}
Use this with keydown:
<input type='text' (keydown)="preventPercentage($event)" [(ngModel)]="value">
preventPercentage(event: any) {
function stopProgram() {
event.stopPropagation();
return false;
}
if (event.keyCode === 8) {
return true;
}
var p = event.target.value;
if ((event.keyCode === 190 && p.indexOf('.') > -1) || p === '100') {
return stopProgram();
}
p = p + event.key;
var s = p.match(/^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/) != null;
if (!s && event.keyCode !== 190) {
return stopProgram();
}
}
This is because it's necessary to use keydown event, not keyup.
It considers that the keyboard action is already done and you cannot cancel it.

How to get keys pressed before enter with jQuery

Sorry if this question has already been asked, I am trying to create an app where the user scans a bar code and the data is then shown on the screen. I don't want to use textbox's because I don't want the data to be editable.
So far I've managed to get the enter key which is automatically sent at the end of the barcode but can't seem to get the keys pressed before, any help would be massively appreciated!
var item = "";
$(document).keypress(function(e) {
if(e.which == 13) {
alert(item);
}else{
item = item + e.which();
}
});
Just to clarify what I want to do is show an alert box with the keys pressed before enter! For example : A B C D ENTER would show an alert("ABCD")
Thanks!
UPDATE
So got my code to work but I'm getting "undefinedTHEKEYSPRESEDHERE" as the return:
var counter = 0;
var item = [];
$(document).keypress(function(e) {
if(e.which == 13) {
alert(item[counter]);
counter++;
}else{
item[counter] = item[counter] + String.fromCharCode(e.which);
}
});
Obviously this isn't clear enough, so I've outlined my problem below:
What I'm getting from alert(item[counter]);:
undefinedKEYS
What I want from alert(item[counter]);:
KEYS
So from undefinedKEYS to just KEYS I need to remove the text "undefined".
Clear enough?
Change e.which() to String.fromCharCode(e.which).
http://jsfiddle.net/8msksn3a/
var item = "";
$(document).keypress(function(e) {
if(e.which == 13) {
alert(item);
}else{
item = item + String.fromCharCode(e.which);
}
});
Not that I recommend this way of checking for previous results, but you are basically resetting item to "" inside the keypress event. Set it once outside the event.
which is a property, not a method:
Convert from ASCII to string char with string.fromCharCode (A google search would have given you that in two seconds).
Use (e.which || e.keyCode) to ensure you get the keycode on all browsers.
e.g.
var item = "";
$(document).keypress(function(e) {
if((e.which || e.keyCode) == 13) {
alert(item);
}else{
item = item + String.fromCharCode(e.which || e.keyCode);
}
});
Copy paste to your console and run:
var keys = [];
$(document).keypress(function(e) {
var keyChar;
if(e.which == 13) {
console.log( keys.join('') );
keys.length = 0;
}
else{
keyChar = String.fromCharCode(e.which);
if( keyChar )
keys.push( keyChar );
}
});
This technique will not show keys which does not have a textual character assigned to them (like the F1-F12 keys for example)

Replacing comma with dot Char

I have made a calculation app in AppJs.
Basicly it is a bunch of:
<input type=number>
fields.
To make it more user friendly i thought i should replace All commas with dots, so that javascript can use the actual values to calculate.
I've tried doing this with this following pice of code:
$("input[type=number]").keyup(function(e){
var key = e.which ? e.which : event.keyCode;
if(key == 110 || key == 188){
e.preventDefault();
var value = $(this).val();
$(this).val(value.replace(",","."));
}
});
In explorer 9, this works as expected: see fiddle
But since App.js uses chromium i guess this is a something thats happens in chromium. How can I work around this?
This is what happens in my app:
When you enter a number containing a comma char. The comma char is moved to the right and when the input box loses focus, the comma is removed (Probably since the comma char isn't allowed in type=number)
When you get the value of an <input type=number> but it isn't valid, then a blank string is returned. You could check this by doing this:
$("input[type=number]").keyup(function(e){
var key = e.which ? e.which : event.keyCode;
if(key == 110 || key == 188){
e.preventDefault();
var value = $(this).val();
console.log(value === "");
$(this).val(value.replace(",","."));
}
});
It will print true every time. Therefore, you need to
Since, on the keyup event, the input has already changed, you must change it to a keydown or keypress event.
Change value.replace(",", ".") to value + "." (since there will be no ",").
Actually, you need to insert it where the cursor is. I'll update that when I have time.
Finished code:
$("input[type=number]").keydown(function (e) {
var key = e.which ? e.which : event.keyCode;
if (key == 110 || key == 188) {
e.preventDefault();
var value = $(this).val();
console.log(value);
$(this).val(value + ".");
}
});
A better idea might be to make it <input type=text> and validate manually if you really need this feature.
It's probably better not to mess with the actual data in the input field but reformat internally before reading, accessing the value through a getter like this:
var getInputNumber = function(inputid) {
return $(inputid).val().replace(",", ".");
};
$("input").keydown(function (e) {
var key = e.which ? e.which : event.keyCode;
if (key == 110 || key == 188) {
var value = $(this).val();
if (!isNaN(value)) {
e.preventDefault();
$(this).val(value + ".");
}
}
});

Javascript onkeyup too "slow"? .hide() works only with onkeydown

I am using a function to show a div:
function showCMD() {
$("#cmd").show("fast");
$('#cmdText').focus();
}
This happens, if the user is typing "cmd" on his keyboard.
Main code:
document.onkeyup = function(event) {
//Save the last three keys
one = two;
two = three;
three = event.keyCode;
if (one == 67 && two == 77 && three == 68 && cmdOpen == false) {
showCMD();
}
//if the pressed key is ENTER and the textarea is focused
if (event.keyCode == 13 && $("#cmdText").is(":focus") == true) {
//passing the code to another function
execCMD(document.getElementById("cmdText").value);
//empty the textarea - works great
document.getElementById("cmdText").value = "";
return false;
}
}
The code typed in by the user will be handled here:
function execCMD(command) {
if(command == "exit") $("#cmd").hide("fast");
console.log(command);
}
console gives me every time exit. But it doesn't hide the div #cmd.
If I change onkeyup to onkeydown, it works fine. The problem with onkeydown is, that the textarea shows the "d", after opening the command line with key sequence "cmd".
So either I can't close the #cmd or it shows a "d" every time I open the #cmd.
Last but not least the html code:
<div id="cmd">
<textarea id="cmdText" maxlength="80"></textarea>
</div>
Maybe you will know a solution for my problem! Thank you so far
Live demo
You need to trim() the command, because when you type exit, the command will store exit\n.
JS
function execCMD(command) {
if(command.trim() == "exit") // Add trim()
$("#cmd").hide("fast");
console.log(command);
}
function showCMD() {
$("#cmd").show("fast");
$('#cmdText').focus();
}
document.onkeyup = function(event) {
//Save the last three keys
one = two;
two = three;
three = event.keyCode; // Change the order of declaration and definition
if (one == 67 && two == 77 && three == 68 && cmdOpen == false) {
showCMD();
}
//if the pressed key is ENTER and the textarea is focused
if (event.keyCode == 13 && $("#cmdText").is(":focus") == true) {
//passing the code to another function
execCMD(document.getElementById("cmdText").value);
//empty the textarea - works great
document.getElementById("cmdText").value = "";
return false;
}
}

Need help in regex

Will this code block $ % # or ( as I type?
var digitsOnly = /[0-9]/g;
var emailOnly = /[a-zA-Z0-9_.#-]/g;
var alphaOnly = /[a-zA-Z]/g;
var dateOnly = /[0-9\/]/g;
function restrictKeys(myfield, e, restrictionType) {
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if they pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if they are press other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
return true;
} else {
return false;
}
}
}
Will this code block $ % # or ( as I
type?
No. Detecting keys pressed is futile, users can paste or drag text into form controls so the key codes don't match the text being entered (or not fire a key event at all). Also, you only care about the value when the form is submitted, whatever value it has in the meantime is irrelevant to you.
Validate form control content on submit, restricting keyboard entry by any means is very, very annoying for users and easily bypassed.

Categories