How to perform multiple page hyperlink clicks with ctrl key
Question
I would like to know how (if there's a way) to handle multiple link clicks via the ctrl key.
So for example the user would go to a web page with about 3 hyperlinks on it. Then the user would hold down the ctrl key, then click one link then another. Then when the ctrl key is released, an event will occur (maybe a search based on the combination of both hyperlinks' values).
I am using C# and assume the solution will probably be done in jQuery?
The selection should work similar to how windows explorer does. Where you hold down the ctrl key, then select a file, then another and then cut or paste it somewhere.
I appreciate any help that you could provide as I am struggling to find help elsewhere.
2 answers
solution1
1 2012-04-25 10:30:34
You could do something like this; keep state of the CTRL key (keycode = 17), add links to array when CTRL is pressed down (keydown event), on the keyup event (when keycode == 17) open the links in new windows. Opening them in tabs is not really possible, however there is a working sample for Firefox; read this .
Example:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var ctrlIsDown = false;
var links = new Array();
function afterKeyUp()
{
if(links.length > 0){
for(var link in links){
window.open(links[link]);
}
links = new Array();
$("a").css('color', '');
}
}
$(document).ready(function(){
$(document).keydown(function(e){
if(e.which == 17) {
ctrlIsDown = true;
}
});
$(document).keyup(function(e){
if(e.which == 17) {
ctrlIsDown = false;
afterKeyUp();
}
});
$("a").click(function(e){
if(ctrlIsDown){
var href = $(this).attr("href");
if($.inArray(href, links) == -1)
{
links[links.length] = href;
$(this).css('color', 'red');
}
e.preventDefault();
}
});
});
</script>
</head>
<body>
<a href="1.html">Link 1</a>
<a href="2.html">Link 2</a>
<a href="3.html">Link 3</a>
</body>
</html>
solution2
0 2012-04-25 10:27:16
High level idea would be
1) Create a css class to highlight selected link
2) Write javascript function to detect Ctrl key on KeyDown javsacript event of hyperlinks, this function should toggle the class of hyperlinks to selected link (so that user know which hyperlinks are selected) and add the hyperlink value/url to an hidden field to know the links of selected hyperlinks
3) Write javascript function on KeyUp javsacript event on hyperlinks to get the selected links and perform action on it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.