Разрешить пользователям выбирать часть текста ссылок

Question

Можно ли разрешить пользователю щелкнуть по ссылке и выбрать часть текста? (В некоторых или любых современных браузерах.)

Есть ли для этого решение CSS/HTML? Или есть другое решение, возможно, JS?

Например, если вы хотите выбрать «Хотите выбрать это». в следующем примере.

HTML:

<a href="#"> 
    Don't want to select this. 
    Want to select this. 
    Don't want to select this. 
</a> 

CSS:

a{ 
    display: inline-block; 
    width: 10em; 
    margin: 10px; 
    padding: 10px; 
    border: 2px solid #eee; 
    text-decoration: none; 
} 

jsFiddle

Я пытался использовать следующий для Google Chrome. Но он не позволял выбирать текст внутри ссылки, просто отключает перетаскивание элемента.

-webkit-user-select: all; 
-webkit-user-drag: none; 

Answer 1

Существует круглый путь для достижения этого в JavaScript. Вы можете заменить ссылки на промежутки и обработать мульдауны и посмотреть, был ли выделен выбор, и если не имитировать ссылку.

DEMO: http://jsfiddle.net/L8px2/2/

КОД:

var posX = -1, posY = -1; 

$('a').each(function() { 
    var a = $(this); 
    a.replaceWith(
      $('<span />') 
       .text(a.text()) 
       .attr({ 
        href: a.attr('href'), 
        target: a.attr('target') 
       }) 
       .addClass('selectable') 
    ); 
}); 

$(document).on('mousedown', '.selectable', function(evt) { 
    posX = evt.pageX; 
    posY = evt.pageY; 
}); 
$(document).on('mouseup', '.selectable', function(evt) { 
    if(evt.pageX == posX && evt.pageY == posY) { 
     alert('no selection. simulate click.'); 
     window.location.href = $(this).attr('href'); 
     // TODO: handle target attribute correctly 
    } 
}); 

Answer 2

Вы можете добавить <span> элемент этих линий вы не хотите, чтобы выбрать, а затем применить -webkit-user-select: none.

Например:

<a href="#"> 
    <span class="no-select">Don't want to select this.</span> 
    Want to select this. 
    <span class="no-select">Don't want to select this.</span> 
</a> 

И в свою очередь:

span.no-select { 
    -webkit-user-select: none; 
    -webkit-user-drag: none; 
} 

Смотрите эту jsFiddle demo. Он работает в Chrome, но я не могу проверить другие браузеры в любой момент.