I am trying out this following code. It is supposed to change the sh attribute of the input to 1 whenever the shift key is pressed, and revert back to 0 when released
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document).on("keyup","body",function(e) {
if (e.which == 16) {
$("input").attr("sh","0");
}
});
$(document).on("keydown","body",function(e) {
if (e.which == 16) {
$("input").attr("sh","1");
}
});
});
</script>
</head>
<body>
<input type = 'text' sh = '0'/>
<p>Just checking</p>
</body>
</html>
It works fine, except when this sequence of events is executed. Press the shift key while the input is not in focus. (Firebug shows sh becoming 1, as expected). Now with the key still pressed, focus in on the input. Now do a right click on the input. The context menu pops up. Now if you release the shift key (let the contextmenu remain), Firebug shows that sh is still 1. You click outside the contextmenu to make it go, or even click the paste option to paste your clipboard text in the input, still sh remains 1. If you again press and release shift, only then sh becomes 0 again.
Any idea how to fix this?
Does the following help you?
I am not sure I simulated your scenario correctly, but seems to work for me. I tested in Chrome.
$(document).ready(function () {
$(document).keyup(function (e) {
if (e.which == 16) {
$("input").attr("sh", "0");
console.log($("input").attr("sh"));
}
});
$(document).keydown(function (e) {
if (e.which == 16) {
$("input").attr("sh", "1");
console.log($("input").attr("sh"));
}
});
//Works... (holding shift will raise keydown as much as I hold the key...)
//$(document).keyup(function (e) {
// if (e.keyCode == 16) {
// console.log("Shift was released...");
// }
//});
//$(document).keydown(function (e) {
// if (e.keyCode == 16) {
// console.log("Shift was pressed down...");
// }
//});
});
Related
I am unable to override the Alt+D keydown event in Microsoft Edge using JavaScript; it works for all other browsers, though. It's navigating to the address bar.
Here's my on keydown event
$(document).keydown(function (e) {
if (e.altKey && e.key == "d") {
e.cancelBubble = true;
e.returnValue = false;
e.preventDefault();
e.stopPropagation();
alert();
}
});
We had again tested the issue and we found that it is happened due to conflict.
As you know, Alt + D key is a short cut key for selecting the address bar in MS Edge browser.
So it always executes instead of your code.
As we cannot change this shortcut key, if it is possible for you then you can try to use any other letter instead of D in a combination.
For example, here in a test I am using E letter. This can be the work around for this issue.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).keydown(function (e) {
if (e.altKey && e.key == "e") {
e.cancelBubble = true;
e.returnValue = false;
e.preventDefault();
e.stopPropagation();
alert("hello...");
}
});
});
</script>
</head>
<body>
<h2>This is a test. Press Alt + e</h2>
</body>
</html>
Output:
I'm trying to show a font awesome '?' after every element that has the ".info" class when the user is holding down the "alt" key. It appears to be working but when i release "Alt" and try to press it again nothing happens. But when i click the document it works again. See code sample:
jQuery(document).ready(function ($) {
var keyDown = false;
$(document).on("keydown", function (e) {
console.log(keyDown);
if (e.key == "Alt") {
if (!keyDown) {
$('.info').each(function () {
$(this).after("<a style=\"color:black;postion:absolute;\"><i class=\"fas fa-info-circle\"></i></a>");
});
}
keyDown = true;
}
});
$(document).on("keyup", function (e) {
if (e.key == "Alt") {
console.log("alt released");
$('.info').each(function () {
$(".fa-info-circle").remove();
});
keyDown = false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info">Test</p>
EDIT: When using another key (i tested "i") it seems to work fine so i think it might be a Chrome issue.
Chrome has a number of keyboard shortcuts that use alt - for instance alt + home takes you to your home page.
you can see all the shortcuts here:
https://support.google.com/chrome/answer/157179?hl=en-GB
if you want to override Chrome's behaviour (which I do not recommend), you could add e.preventDefault() to your keydown function.
I want to prevent the default event on key #93 (select, between alt gr and ctrl right on AZERTY keyboard).
This key open context menu like right click.
I tried :
$(document).off('keydown');
$(document).off('keyup');
$(document).off('keypress');
$(document).on('keypress', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keyup', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keydown', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
Nothing works... I have always the contextmenu.
After checking for a while, I've been headed to another question similar to this one, but with a very different matter.
In any case, since the problem is the context menu, you don't even need jQuery for such, and the solution (despite it WON'T always work in firefox because the user may set it to disable such) is this one:
document.oncontextmenu = function (e) {
e.preventDefault();
return false;
}
fiddle:
http://jsfiddle.net/0kkm1vq0/3/
Works on chrome as well, and you won't need to use the keyboard listeners.
Reference: How to disable right-click context-menu in javascript
(which is really the same as key #93).
** note that this will disable the right click too **.
EDIT:
Not sure if this is cross-browser (the UPDATED code below seems to be working for both chrome and firefox, didn't try IE and others though), but the event fired by key #97 seems to be identified as 1, while the click seems to be identified as key 3, so you can just:
(function($){
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$(document).on('keyup', function(e) {
e.which == 93 && e.preventDefault();
});
}
else {
document.oncontextmenu = function (e) {
e.which == 1 && e.preventDefault();
}
}
})(jQuery);
http://jsfiddle.net/0kkm1vq0/10/
To disable JUST the key and not the right click.
I have the following simple <textarea>
<textarea id="streamWriter" rows="1" cols="20" placeholder="Writer"></textarea>
Also I have the following jQuery/JavaScript code block:
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode == 13) {
if (e.ctrlKey) {
alert('ctrl enter - go down a line as normal return would');
return true;
}
e.preventDefault();
alert('submit - not your default behavior');
}
});
I'm trying to force the not to create a new line break on normal return keydown. But I want this behavior if Ctrl+Enter was typed instead.
This does detect the difference but is not forcing the behavior that I need.
If you've used Windows Live Messenger, I need the same textbox behavior. Enter to submit (In my case I will call a function but stop the textarea from going down a line) and Ctrl+Enter go down a line.
Solutions? Thanks.
Update:
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode == 13) {
if (e.ctrlKey) {
//emulate enter press with a line break here.
return true;
}
e.preventDefault();
$('div#writerGadgets input[type=button]').click();
}
});
The above does what I am trying to do. There is just the part to emulate enter press with a line break. Please let me know how to do this if you know.
Using keypress instead of keydown works a little better, however will not work with the Ctrl key; I switched to the shift key - jsfiddle.
Edit: As far as I can tell, you won't be able to use Ctrl key consistently cross browser because the browser uses it for it's own short-cuts. You would run into the same situation with the alt key.
Edit again: I have a solution that works with the Ctrl key - jsfiddle.
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode === 13 && e.ctrlKey) {
//console.log("enterKeyDown+ctrl");
$(this).val(function(i,val){
return val + "\n";
});
}
}).keypress(function(e){
if (e.keyCode === 13 && !e.ctrlKey) {
alert('submit');
return false;
}
});
Edit: This doesn't work 100%, it only works if you are not in the middle of text. Gonna have to work on a way to have the code work on text in the middle.
By the way... Why are you doing it this way? Wouldn't it be confusing to the user if they pressed enter to make a new line and the form all of a sudden submitted before they were ready?
Clear VanillaJS:
document.querySelector('#streamWriter').addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
// Ctrl + Enter
if(e.ctrlKey) {
console.log('ctrl+enter');
// Enter
} else {
console.log('enter');
}
}
});
Kevin B's solution works well on Mac, but not on windows.
On windows, when ctrl +enter is pressed, the keyCode is 10 not 13.
Ctrl+Enter jQuery in TEXTAREA
I am trying to get an event to trigger when I am on a page and press space, but I can't figure it out. Currently I am trying to use jQuery to accomplish a satisfying result.
I have tried using keydown, keyup and keypress, but it seems that you can only use it if you are actually inputting something to a form or field.
What I want is to trigger an alert when space is pressed.
These events bubble up, so if you're trying to trigger the event wherever your focus is (ie. not in an input), just bind a handler on window:
$(window).keypress(function (e) {
if (e.key === ' ' || e.key === 'Spacebar') {
// ' ' is standard, 'Spacebar' was used by IE9 and Firefox < 37
e.preventDefault()
console.log('Space pressed')
}
})
Also see the list of all .key values.
Try this:
$('input:text').keypress(function(e) {
if (e.keyCode == 0 || e.keyCode == 32) // `0` works in mozilla and `32` in other browsers
console.log('space pressed');
});
Try to bind your key event listener to the jQuery $(document) object;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.keyCode == '32') {
alert('space');
}
});
});
</script>
</head>
<body>
</body>
</html>
This code can be used:
$(window).keypress(function(e) {
if (e.keyCode == 0 || e.keyCode == 32) {
console.log('Space pressed');
}
});
Explaination:
The $(window).keypress(function(e) waits for the user to press any key and stores the data of the key pressed in the argument 'e'.
Then if (e.keyCode == 0 || e.keyCode == 32) checks if the code of the key pressed is equal to the code of spacebar, that is 0 or 32. If this returns false then any other key is pressed and the code ends.
Some commonly used keycodes:
backspace:8
tab:9
enter:13
shift:16
ctrl:17
alt:18
caps lock:20
escape:27
(space):32
0-9:48-57
a-z:65-90
numpad0-numpad9:96-105