html - Unable to select text inside a tag

Question

I have the following sample code:

<a href="http://example.com">
   <p>...</p>
   <img src="" />
</a>

Need to be able to copy text from p tag. The problem that p and img inside a and I can't select it.

I need exactly this HTML structure, as user should be able to copy link from that block. How can I do that?

Answer 1

好吧，如果您开始从外部拖动鼠标，则可以复制链接。

如果您想要更自然的感觉，您可以为您的用户提供一个复制此链接按钮，并让 JavaScript 为他复制它。

Answer 2

也许您可以在链接后附加一个文本输入，仅用于第一次单击。

演示

HTML：

<a href="http://example.com" class="selectable">
   <p>...</p>
   <img src="" />
</a>

jQuery：

$('.selectable').one('click',function(ev){
    ev.preventDefault();
    var el = $(this);
    var txt = el.find('p').text();
    $('<input type="text" value="'+txt+'" style="display:block">')
            .insertAfter(el)
            .select();
});​