Pressing any keyboard buttons removes hash url - javascript

I have found a bug on a website I am maintaining. What happens is if you click any button on the keyboard, the hash url gets removed and the browser jumps to the top of the page. I thought this was an issue with my smooth scroll function but I removed it completely and nothing changed. I also tried to set default actions for arrow clicks but it still removed the hash url.
You can see it happening here, and all you need to do is click any button on your keyboard to see the issue.
Is there anyway to prevent the browser from removing the hash url?

The problem seems to be in the Javascript file named app.js included within your website.
Somewhere, you check for keyboard input like this:
$(document).keyup(function(e) {
if(e.keyCode == 37 || 39) { //left right arrow
var activeMem = $('.detail-active').find(textCenter).text();
var spaces = activeMem.toString().replace(/ /g, '-');
var comma = spaces.replace(',', '').toLowerCase();
var clean = comma.replace('.', '').toLowerCase();
if (clean.substring(clean.length-1) == ".") {
clean = clean.substring(0, clean.length-1);
}
var hash = '#'+clean;
location.hash = hash;
}
});
The problem is with this condition if(e.keyCode == 37 || 39).
It should be if(e.keyCode == 37 || e.keyCode == 39)

Related

Check if Tab key is held down

I want to check if the Tab key is pressed and held down and released so that I can perform some other actions with other key combinations.
var shifted = false;
var tabbed = false;
$(document).on('keyup keydown', function(e) {
shifted = e.shiftKey;
tabbed = e.keyCode === 9;
console.log(tabbed);
});
The above code is working fine for the Shift key, but it's not working for the Tab key. When the Tab key is pressed and held the tabbed variable should be true and when released it should be false.
To answer the question (rather than question if the question should be a question):
This MDN page describes how keyboard events work.
one keydown, with repeat = false
multiple keydown, with repeat = true
one keyup
So you can check for when the tab is started to be held down with keydown && !repeat and when it's stopped being held down with keyup
Note you must also cancel the event so that it doesn't do the correct/expected behaviour of tabbing to the next tabbed-indexed input (emphasis on what tab actually should be doing...)
It's also cleaner to keep the events separate, giving:
var tabdown = false;
$(document).on('keydown', function(e) {
if (e.keyCode === 9) {
tabdown = true;
return false;
}
if (tabdown && e.keyCode >= 49 && e.keyCode <= 51)
{
$("#in" + (e.keyCode-48)).focus();
return false;
}
});
$(document).on('keyup', function(e) {
if (e.keyCode === 9) tabdown = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<em>hold tab and 1, 2 or 3 to change inputs</em><br/>
<input type='text' id='in1'>
<input type='text' id='in2'>
<input type='text' id='in3'>
But you'll note that an instruction is needed on the page as it's not a normal method - and also disables the normal method to easily/quickly switch between inputs in order.
This is not a recommended course of action.
But included here for completeness.
Use the following to identify is tabbed
tabbed = (e.keyCode === 9 && e.type === 'keydown')?true:false;

jQuery Keypress Arrow Keys steering in DropDown

I have a problem with Dropdown, which is connected to the database and I can't control arrows up and down to move result only mouse click.
See this is my code that I started writing but doesn't work.
What am I doing wrong?
$(field-customer-dropdown).on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});
Edit:
As I made my little code currently looks like this:
$("body").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 40) {
console.log("key");
$(".drop-down-row:firstchild").css("backgroundcolor","red");
}
});
And this is the result:
enter image description here
How should look like the code so that I could push keydown 40 switch from Data 1 on Data 2?
Can anyone help me?
JavaScript variables cannot contain - in them. Also, the selector you are using is not a HTML Tag, which doesn't have any prefix. If it's a class, prefix it with . else if it is an id, prefix it with a #.
$(".field-customer-dropdown").on("keydown", function(event) {
var keyCode = event.which;
if (keyCode == 38 || keyCode == 40) {
showDropDown();
}
});

Detecting left and right control keys in Javascript

I have a text input, where I need to bind an event on doing a CTRL-V. I have set a global variable named ctrl which is set to 1 whenever a keydown is fired with a which value of 17. Similarly it is made 0 when a keyup is fired with which value of 17
Problem is, there are two CTRL keys. So if I do something like: first pressing the left CTRL key, and while pressing it down, press the right CTRL key also (so that both CTRL keys are pressed now), and then I release only one of them, the keyup is fired and the variable ctrl is set to 0, even though the other CTRL key is still being pressed.
How do I fire the events such that the variable is set to 0 only when both CTRL keys are up (I don't need to exactly differentiate between them).
Update : this is now possible in modern browsers
The easiest way to detect left and right control keys in Javascript
$(document).ready(function(){
$("html").keydown(function(e) {
if (e.ctrlKey) {
if (event.location == 1) console.log('left ctrl');
if (event.location == 2) console.log('right ctrl');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note: You have to click the inside white space when you run code snippet to activate keyboard keys. This is tested in Chrome and Safari.
There are two properties for this of keydown event.
You can differentiate left and right Ctrl by using
if ( e.location == 1 || e.keyLocation == 1 ) {
var keyPosition = 'left';
} else if ( e.location == 2 || e.keyLocation == 2 ) {
var keyPosition = 'right';
}
I don't think there is a way for that unless you write on lowlevel ... keyCode is the same for both (it is 17)
Just You can use e.ctrlKey as a way to determine if the control key was pressed.
However I read around and found one answer mentioning you could do that in IE but I did not try it from my side
you can use e.originalEvent.location instead of the global event.location
$(document).ready(function(){
$("html").keydown(function(e) {
if (e.ctrlKey) {
if (e.originalEvent.location === 1) console.log('left ctrl');
if (e.originalEvent.location === 2) console.log('right ctrl');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
below is your answer for three mouse keyup events. rest for mousewheel you should ask again:
/*
1 = Left Mousebutton
2 = Centre Mousebutton
3 = Right Mousebutton
*/
$(document).mousedown(function(e) {
if (e.which === 3) {
/* Right Mousebutton was clicked! */
alert("right key code 3");
}
else if(e.which === 2) {
alert("Centre key code 2");
}
else if(e.which === 1) {
alert("Left key code 1");
}
});
you can use this:
$('#inputboxinput').bind('keypress', function(e) {
if(e.keyCode==13){
// Enter pressed... do anything here...
}
});
the cross-browser way:
if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode: event.keyCode)) {
event.which = event.charCode || event.keyCode;
}

Pagination jQuery next and previous control with keyboard - .trigger('click') doesn't work

I am working on pagination.
To help a user to change pages with keyboard short-keys, instead of clicking a mouse, I came up with a jQuery solution that catches user keyboard events with CTRL + → and CTRL+ ←
$(document).keydown(function(event) {
if (event.ctrlKey) { // if ctrl is being held
var keycode = event.keyCode ? event.keyCode : event.which;
if(keycode === 39) { // for rightwards arrow (for leftwards arrow keycode === 37)
window.open($('#pagination li.next a').attr('href'), '_parent'); // open the next link
}
}
});
My question is why it doesn't work with regular .trigger('click'), like this:
$('#pagination li.next a').trigger('click');
jsFiddle Live Example
$('#next').click(function() {
window.open('http://www.stackoverflow.com', '_blank');
});
$('#prev').click(function() {
window.open('http://www.google.com', '_blank');
});
$(function() {
$('#next').trigger('click')
})
I didn't find the exact answer for my question, I would like to post a slightly different and final, well working solution, based on information gathered and peoples' post. Thank you those that replied!
When you construct pagination, I believe, a user would be happy to just click ← Ctrl / Ctrl → to switch in between pages.
The following code has only one improvement - the error occurred on the first an the last page - when there are no next or previous buttons on the page, because you either on the last pagination or the first one, the initial code returned undefined (obviously), so I fixed it and would like to share the final result with those who could be possibly interested:
$(document).keydown(function (event) {
var keycode = event.keyCode ? event.keyCode : event.which;
if (event.ctrlKey) {
if (keycode === 39) {
var nextExists = $('#pagination li.next a').attr('href');
if (nextExists) window.location.href = $('#pagination li.next a').attr("href");
}
if (keycode === 37) {
var previousExists = $('#pagination li.previous a').attr('href');
if (previousExists) window.location.href = $('#pagination li.previous a').attr("href");
}
}
});

Send tweet using 'enter' key (Greasemonkey)

I'm attempting to create a Greasemonkey script that can submit a tweet when a user hits the 'enter' key. I've gotten this to work fine on a simple HTML page (with the help of a few excellent tips on this site). However, when I try to use the code on my twitter page, the alert only fires if a tweet is not currently being authored.
document.onkeyup = function(event){
var keyCode;
if (window.event) // IE/Safari/Chrome/Firefox(?)
{
keyCode = event.keyCode;
}
else if (event.which) // Netscape/Firefox/Opera
{
keyCode = event.which;
}
if (keyCode == 13){
alert("Enter pressed");
}
}
My next thought was to test for a more specific keypress event. So I tried testing for a key event within the new tweet textarea:
document.getElementsByClassName("twitter-anywhere-tweet-box-editor")[0].onkeyup = function(event)
...but this event never seems to fire. I also tried grabbing the element by tag:
document.getElementsByTagName("textarea")[0].onkeyup = function(event)
...but not dice there either. I wonder if this has to do with the fact that the new tweet window is not loaded from the get-go at window.onload(). Thoughts?
I got it thanks to this post. I've also posted the full Greasemonkey script here.
setInterval (function() { checkForTweetbox (); }, 500);
function checkForTweetbox () {
var tweetbox = document.querySelector ('div.tweet-box textarea'); //check for new tweet window
if (tweetbox) {
if (! tweetbox.weHaveProcessed) {
tweetbox.weHaveProcessed = true;
// alert ('New tweet-box found!');
}
}
tweetbox.onkeydown = function(event){
if(event.keyCode == 13){ //13 = Enter keycode
document.querySelector ('a.primary-btn').click(); //there must be at least one character in the textarea
}
}
}

Categories

Resources