2

私は構造を持っています:

<span class="word">This</span><span class="word">is</span><span class="word">the</span><span class="word">text</span><span>.</span>

ユーザーが単語全体 (spans、class="words") を選択できるようにしたい (デスクトップおよび iOS のブラウザーでも - iBooks のように)。

cssでスタイルを設定するにはどうすればよいですか？

これを行う正しい方法は何ですか？(以前はセレクションでは機能しませんでした)

ありがとう。

4

2 に答える 2

1

あなたがjQueryについて言及していないことは知っていますが、この動的なものでは、それを使用することを強くお勧めします。

その取引全体を div でラップします。

<div id="wordSelector"><spans></div>

そして、mousedown イベントを div にアタッチします。セマフォを使用して、イベントがマウスダウン中にのみ処理されるようにします。マウスアップ イベントが登録されるまで、スパンでマウスオーバー イベントをキャプチャします。

注: これらのイベントは、div の外にあるが div に入ったマウスダウン イベントが確実に処理されるようにするために、div の代わりにドキュメントに添付する必要がある場合があります。

var spansTouched = [];
var mouseDown = 0;
$("#wordSelector").mousedown( function(){
 //track spans touched with a semaphore
 mouseDown++;
});
$("#wordSelector").mouseup( function(){
 mouseDown = 0;
 //handle spansTouched and then reset it to []
});
$(".word").mouseover( function(){
 if(mouseDown > 0){
  spansTouched.push(this);
 }
});

明らかに、ここには改善の余地があります。これは、セマフォとマウス イベントを使用する可能なアプローチを強調するためのものです。

于 2012-06-20T20:14:02.913 に答える
0

ユーザーが単語を選択する必要があるという意味がわかりません。ユーザーが単語をクリックして「選択」する必要がある場合は、TipTipなどの jQuery プラグインやその他のtooltip-pluginを使用できます。少なくともtiptipはクリックをサポートします。

ツールチップ プラグインのいずれかがデフォルトでテキストのハイライトのトリガーをサポートしているかどうかはわかりませんが、JavaScript を使用してテキストのハイライトをリッスンし、適切なツールチップをトリガーして手動で表示し、テキストが選択解除された場合は再び非表示にします。

Dave Welsh は、利用できるテキスト選択を盗聴するための小さな jQueryを作成しました。

于 2012-06-20T20:14:15.803 に答える