CODEWITHSUNDEEP
jqueryhtmlcss
Gul
Gul

Reputation: 1767

Link selectable from middle

How can I make a link selectable, like normal text, without triggering the mouse click?

Unlinked text can be easily selected from the middle. I want to make the link selectable if the user holds down the mouse, but if it's a single click then open the link as normal.

Upvotes: 0

Views: 135

Answers (2)

No Results Found
No Results Found

Reputation: 102834

If you're going to do this, don't butcher your HTML with <span>s posing as links. You're using javascript, so just use javascript to remove the href from the links and attach it's value to the onclick event.

Something like this (using jQuery):

$('a').each(function(){
    var href = $(this).attr('href');
    $(this).removeAttr('href'); // Now the link is "more selectable"
    $(this).click(function(){
        top.location = href;
    });
});

Much more accessible, doesn't force you to write bogus HTML. Links should be marked up with the <a> tag. Demo: http://jsfiddle.net/phbt4/1/

You'll have to specify styles on these links to make sure they look/feel like links instead of rely on browser defaults, as removing the href attribute will have this affect.

Upvotes: 2

James Allardice
James Allardice

Reputation: 166031

This behaviour is defined by the browser so there's not much you can do about it. I believe some browsers do allow you to select anchor text from any point (Opera?), not just the start and end, but that's not much use to you.

If you really want to change the default browser behaviour (which is rarely a good idea), then read on...

One potential solution could be to not use a elements, but instead use something like span. Give each span link a common class and store the intended URL:

<span class="linkSpan" data-link="http://www.example.com">This is a link</span>

Then use JavaScript (you've tagged the question with jQuery so I'll use jQuery here) to redirect the user:

$(".linkSpan").click(function() {
    window.location = $(this).data("link");
});

Obviously you would need to style .linkSpan appropriately to make it appear more like an actual link.

Update (following @Madmartigan's comment) - if you hold the mouse button down when the cursor is not over the link, then move over the link itself, you can start selecting text from any point within the link. I managed that in Chrome at least.

Upvotes: 5

Related Questions