jQuery: Link changing when modifier held down - but link stops working
-
01-10-2019 - |
Question
I'm trying to create a link that points to URL 1 normally and to URL 2 when the shift key is held down. I arrived at this code sample, which properly switches the links (as indicated in the browser status bar when hovering over the link), but clicking on URL 2 doesn't work: the browser just doesn't do anything. That's right: a link is present, but clicking it just doesn't do anything.
Tried this in Firefox 3.6.6 and Safari 5.0, same result in both.
Any hints? Thanks!
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).keydown(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
}
});
</script>
<a href="normalurl" id="mylink">My Link</a>
Solution
Seems the browser got a little bit too busy updating the DOM while the shift key was pressed, so I put a flag in place:
<script type="text/javascript">
$(document).ready(function() {
var ExtendedLinkShown=false;
$(document).keydown(function(event) {
if (!ExtendedLinkShown && event.keyCode == '16') {
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
ExtendedLinkShown=true;
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
ExtendedLinkShown=false;
}
});
});
</script>
Only issue now is that - As pointed out by Romain Deveaud - SHIFT + Click opens a new browser window.
OTHER TIPS
It looks like because the shift key is held down the Dom thinks that the "browser" will handle a special request. so that when the command is sent to the DOM To open it fails.
I done a little test and come up with this.
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).keydown(function(event) {
if (event.keyCode == '16') {
event.keyCode = null; //Remove that
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
event.keyCode = '16'; //Add it back
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
event.keyCode = null; //Remove that
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
event.keyCode = '16'; //Add it back
}
});
</script>
<a href="normalurl" id="mylink">My Link</a>
And this seems to work in Google Chrome, but is pretty hacky.