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.

What have your tried so far?? with simple way, setting `class="selectedItem"` to selected hyperlink..??? — Niranjan Singh, Apr 25 '12 at 10:13
Be aware that if the client browser has a custom binding for the key you are using (like Ctrl) the default browser behaviour still occurs. — David Diez, Apr 25 '12 at 10:46

score 1 · Answer 1 · edited May 23 '17 at 12:21

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>

Thanks so much Brian. I will most definitely try this. – Marky Apr 25 '12 at 11:17 — Marky, Apr 25 '12 at 11:17

score 0 · Answer 2 · answered Apr 25 '12 at 10:27

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.

Thanks Imran. I will incorporate this into my solution – Marky Apr 25 '12 at 11:18 — Marky, Apr 25 '12 at 11:18

How to perform multiple page hyperlink clicks with ctrl key

2 Answers2