Detach keyup for Space bar and Enter keys - javascript

Using jQuery 3.+, how can I detach keyup on buttons triggered by the Space bar and Enter keys?
I have something like this:
$("#MAIN").on("keyup", "#scrub-btn.buttonOn:focus", function(e){
var allthesekeys = ( e.which == 107 || e.which == 109 || e.which == 96 || e.which == 97 || e.which == 98 || e.which == 99 || e.which == 100 || e.which == 101 || e.which == 102 || e.which == 103 || e.which == 104 || e.which == 105 );
if ( allthesekeys ){
// Do the scrubbing here...
} else {
$(this).off("keyup");
// Can we use $(this) here? Why are Space bar and Enter keys ignoring this?
}
});
Must I rethink my strategy? Any pointers appreciated.

You are using event delegation...
So the event handler (the function) is attached to #MAIN to handle the event occuring in #scrub-btn.buttonOn.
$(this) represents the element where the event occurs... Not the element delegated to handle the event. That is why the .off() is not working.
Use $("#MAIN") instead... Or $(this).closest("#MAIN") because that is the element which has to be detached from the event listener.
CodePen
I am tempted to suggest a more consise way to write your condition:
var allthesekeys = [107,109,96,97,98,99,100,101,102,103,104,105];
if ( allthesekeys.indexOf(e.which) > -1 ){...}
It will be easier to maintain...
;)

I think you are looking for e.preventDefault();

Related

Zoom in - Zoom out problem on the Javascript Background

I want to apply a javascript background on my website. I found a ready one, but I recognize a problem on it. When you scrool with mouse on browser, zoom in or zoom out, it starts to look so strange. You can try it on your own from that demo link;
Demo
Also the html and css code of this animational background is in this link;
Link of HTML-CSS-Javascript of this demo
Can you help me, how can I prevent it from being zoomed in or zoomed out on a browser ?
You can only do it using jquery with below code,
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
$(window).bind('mousewheel DOMMouseScroll', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
Note: Make sure you have included jquery in your code before this script.

How to prevent entering multiple + in a textbox in jquery

My current code is like this
$('.textBoxClass').bind('keypress', function (e) {
return (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57) && e.which != 46 && e.which != 43) ? false : true;
});
Use the jQuery keyup event.
You need to check if event.keyCode is + and if input field already contains +.
If yes, you can prevent the event with event.preventDefault().
Or you can use some third-part plugin like jqueryvalidation and use a regular expression.
Remember to validate the data serverside because javascript validation can be easily bypassed.

JS - Backspace Detection Not Working

I have some code which is a basic highlighting system, when I try to catch backspaces, I can't catch them, even when I use onkeydown and keypress.
I am using jQuery to get the events and register the function calls. Here is my code:
if (e.charCode == 8 || e.charCode == 46 || e.charCode == 35) {
if (errCount) {
errCount--;
}
backLetter(index);
index--;
}
Use .which, as in e.which == 8
https://jsfiddle.net/skdreow5/1/
var xTriggered = 0;
$( "#target" ).keydown(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
}
if ( event.which == 8 ||
event.which == 46 ||
event.which == 35 ) {
console.log("backspaced: " + event.which);
}
xTriggered++;
var msg = "Handler for .keydown() called " + xTriggered + " time(s).";
console.log(msg);
});
DEMO
Regarding e.charCode
This feature is non-standard and is not on a standards track. Do not
use it on production sites facing the Web: it will not work for every
user. There may also be large incompatibilities between
implementations and the behavior may change in the future.
Either use e.which or e.keyCode to trap the backspace. Some browsers support e.which and some support e.keyCode. As part of jQuery concerned, they have normalized e.which in the event object. In case you're using jQuery go with e.which.
$(function() {
$("input").keyup(function(e) {
if(e.keyCode==8) {
alert("Backspace pressed");
}
});
});

Capturing ctrl+z key combination in javascript

I am trying to capture ctrl+z key combination in javascript with this code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type='text/javascript'>
function KeyPress(e) {
var evtobj = window.event? event : e
//test1 if (evtobj.ctrlKey) alert("Ctrl");
//test2 if (evtobj.keyCode == 122) alert("z");
//test 1 & 2
if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeypress = KeyPress;
</script>
</body>
</html>
Commented line "test1" generates the alert if I hold down the ctrl key and press any other key.
Commented line "test2" generates the alert if I press the z key.
Put them together as per the line after "test 1 & 2", and holding down the ctrl key then pressing the z key does not generate the alert as expected.
What is wrong with the code?
Use onkeydown (or onkeyup), not onkeypress
Use keyCode 90, not 122
function KeyPress(e) {
var evtobj = window.event? event : e
if (evtobj.keyCode == 90 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeydown = KeyPress;
Online demo: http://jsfiddle.net/29sVC/
To clarify, keycodes are not the same as character codes.
Character codes are for text (they differ depending on the encoding, but in a lot of cases 0-127 remain ASCII codes). Key codes map to keys on a keyboard. For example, in unicode character 0x22909 means 好. There aren't many keyboards (if any) who actually have a key for this.
The OS takes care of transforming keystrokes to character codes using the input methods that the user configured. The results are sent to the keypress event. (Whereas keydown and keyup respond to the user pressing buttons, not typing text.)
For future folks who stumble upon this question, here’s a better method to get the job done:
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
alert('Undo!');
}
});
Using event.key greatly simplifies the code, removing hardcoded constants. It has support for IE 9+.
Additionally, using document.addEventListener means you won’t clobber other listeners to the same event.
Finally, there is no reason to use window.event. It’s actively discouraged and can result in fragile code.
Ctrl+t is also possible...just use the keycode as 84 like
if (evtobj.ctrlKey && evtobj.keyCode == 84)
alert("Ctrl+t");
$(document).keydown(function(e){
if( e.which === 89 && e.ctrlKey ){
alert('control + y');
}
else if( e.which === 90 && e.ctrlKey ){
alert('control + z');
}
});
Demo
document.onkeydown = function (e) {
var special = e.ctrlKey || e.shiftKey;
var key = e.charCode || e.keyCode;
console.log(key.length);
if (special && key == 38 || special && key == 40 ) {
// enter key do nothing
e.preventDefault();
}
}
here is a way to block two keys, either shift+ or Ctrl+ key combinations.
&& helps with the key combinations, without the combinations, it blocks all ctrl or shift keys.
90 is the Z key and this will do the necessary capture...
function KeyPress(e){
// Ensure event is not null
e = e || window.event;
if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
// Ctrl + Z
// Do Something
}
}
Depending on your requirements you may wish to add a e.preventDefault(); within your if statement to exclusively perform your custom functionality.
The KeyboardEvent.keyCode is deprecated (link) think about using KeyboardEvent.key instead (link).
So, the solution would be something like this.
if (e.key === "z" && e.ctrlKey) {
alert('ctrl+z');
}
You can actually see it all in the KeyboardEvent when you use keydown event
Use this code for CTRL+Z. keycode for Z in keydown is 90 and the CTRL+Z is ctrlKey. check this keycode in your console area
$(document).on("keydown", function(e) {
console.log(e.keyCode, e.ctrlKey);
/*ctrl+z*/
if (e.keyCode === 90 && e.ctrlKey) { // this is confirmed with MacBook pro Monterey on 1, Aug 2022
{
//your code here
}
});

Know if input is in use and disable the hotkey (Jquery)

I use some hotkeys on my website, but when the user is inside the search form or inside comment. I want to disable them.
What the best for me to do it? Thanks
Example of my hotkey:
$(document).keydown(function(e)
{
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
});
You can check for the event.target element. If that element is from type INPUT you might want to omit the handler code. Could look like
$(document).keydown(function(e)
{
if( e.target.nodeName !== 'INPUT' ) {
if (e.which == 40 || e.which == 74) // next post
{
return scroll('next');
}
if (e.which == 38 || e.which == 75) // prev post
{
return scroll('prev');
}
}
});
You could check if e.target.nodeName === INPUT (the event is triggered inside an input field) and act accordingly

Categories

Resources