사용자가 링크 텍스트의 일부를 선택할 수 있도록 허용

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

. 그러나 그것은 링크 안의 텍스트를 선택하는 것을 허락하지 않았고, 단지 요소의 드래그를 불가능하게했습니다.

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

Answer 1

자바 스크립트에서이를 달성하는 방법에 대한 라운드가 있습니다. 링크를 스팬으로 대체하고 mousedown을 처리하여 선택 사항이 있는지 확인하고 링크 클릭을 시뮬레이트하지 않을 경우 확인할 수 있습니다.

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

CODE : 나는 아직도 링크 내부를 클릭하고 텍스트의 일부를 선택할 수 없습니다이와

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에서 작동하지만 잠시 다른 브라우저를 테스트 할 수는 없습니다.