次のサンプルコードがあります。
<a href="http://example.com">
<p>...</p>
<img src="" />
</a>
p
タグからテキストをコピーできる必要があります。p
とimg
中a
と選択できない問題。
ユーザーはそのブロックからリンクをコピーできるはずなので、まさにこの HTML 構造が必要です。どうやってやるの?
最初のクリックだけのために、リンクの後にテキスト入力を追加できるかもしれません。
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();
});
リンクの外側からマウスをドラッグすると、リンクをコピーできます。
より自然な感覚が必要な場合は、ユーザーに[このリンクをコピー] ボタンを提供し、JavaScript でユーザーに代わってそれをコピーさせることができます。