9

タイトルが適切に選択されているかどうかはわかりません...

HTML/JS/CSS でテキスト選択をシミュレートして、実際にテキストを選択するときにモバイル デバイスのアクション バブルを取り除こうとしています。

より具体的には、私はこれを回避しようとしています: ここに画像の説明を入力

ビジュアル:

ここに画像の説明を入力

私がそれを構築した方法は、問題ではないため変更される可能性があります。選択されたテキストはspan.selectionタグ内とそのタグ内でラップされ、ハンドラーとして使用される2つのキャレットもあります。 

Lorem ipsum dolor                            <!-- Unselected Text -->

<span class="selection">                     <!-- Start selection wrapper -->

  <span rel="previous" class="caret"></span> <!-- The left-side caret -->

  sit amet, consectetur                      <!-- The selected texts -->

  <span rel="next" class="caret"></span>     <!-- The right-side caret -->

</span>                                      <!-- End selection wrapper -->

adipiscing elit.                             <!-- Unselected Text -->

理想的には、ドラッグアンドドロップを使用してテキストを選択するのが楽しいですが、これを行うのは非常に難しいと思います。その場合、キャレットをクリックして前または次の単語を選択するかもしれません中に包むの.selectionはそれほど悪くはありません。

これがjsfiddleです：http://jsfiddle.net/m6Qx4/

<i>周囲のテキストには、<b>、 、<span>などの HTML タグも含まれている<ul>/<li>可能性があり、解析が困難になる可能性があります。

これを行う方法はありますか？

ステータスアップデート：

カスタムjQueryメソッドを使用して、実際に.click();イベントリスナーで機能させることができました。

最終的には、モバイル デバイスで使用できる限り、クリック イベントをドラッグして周囲の単語を選択できる jQuery UI に置き換えます。

私の現在のバグは、赤いキャレットの再配置で構成されています。それらを破棄して先頭に追加/追加しようとしましたが、まだ機能していません。テキスト ノードに変更を加えた後、DOM を適切にリロードできないのは Firefox のバグでしょうか?

参考: jsFiddle最近のサービス停止によるjsFiddle.net

の動作状況を確認するには、彼らのTweetsを参照してください。

4

2 に答える 2

2

いくつかの考え：

<span>すべてを a でラップすることが実行可能なソリューションであることがわかりません。このようなものがあるとどうなりますか？

<p>The <b>important terms</b> will be bolded in this text</p>

を選択すると、タグの本体がタグの本体にオーバーラップThe importantしようとするタグの混乱が発生します。<span><b>

<span>より良い解決策は、同じクラスの選択タグを複数持つことだと思います。HTML タグが検出されるたびに、タグをスキップして新しい選択を作成します<span>。次に、キャレットの位置を変更するときは、次のようにするだけです。

$(".selection:first").prepend(startCaret);
$(".selection:last").append(endCaret);

私はこのアイデアをいじってみましたが、うまくいきました。<span>本当に凝ったものにしたい場合は、対応する開始タグに遭遇した後に終了タグを見つけたときにselection をマージしてみることもできますが、それは大変な作業になります。

絶対配置のスタイルを指定しているため、キャレットが正しく移動していません。それを相対に変更し、各キャレットに&nbsp;. 適切に見えるようにするには、他のいくつかの配置 CSS 設定をいじる必要がありますが、それらの変更で期待どおりに動きます (例はこちら)。

これについていくつかのアイデアを試していたので、選択範囲内でキャレットを移動する必要がないように、キャレットに絶対配置を試みました<span>。それは間違いでした。段落がマークアップなしで新しい行にオーバーフローするという問題に遭遇しました。選択範囲内にキャレットを配置するという考えにとどまります<span>。

最後に、いくつかの思考の質問:

  • 範囲を限定しますか？(つまり、タグ内で選択を開始した場合、選択がそのタグの外に次のタグまたはそれに続く<p>タグに流出することを許可しないでください)<p>
  • 特定のタグは選択できなくなりますか? (つまり<table>、、、、<script>など<select>)

このアイデアはかなりクールだと思いますが、かなり大規模なプロジェクトになる可能性があります。もう少し洗練されたときに試したプロトタイプのいくつかを投稿します。

于 2012-07-03T00:09:49.847 に答える
0

Rusty の問題をカバーするには:

最初にタグを分割します。

var textBlock = textContainer.html(),
taglessArray = textBlock.split(/<[^>]*>/),
arrayOfTags = textBlock.match(/<[^>]*>/g),
tagsFirst = (textBlock[0] === '<') ? true : false, //parens for legibility only
//tagsFirst is a switch that tells us which to start splicing back in later

次に、空白以外のすべてを、使用できるスパン タグでラップしましょう。

var i = taglessArray.length;
while(i--){
    taglessArray[i].replace(/([^\s]*)/g,'<span class="selectableWord">$1</span>');
}
//not 100% sure I got that right - haven't tested - but the idea is , wrap all non
//whitespace/word boundary blocks in 'selectableWord' classed span tags

今、それらを元に戻します。元のテキスト書式タグは位置を保持する必要があります。明らかに「selectableWord」クラスのスパンは、レイアウト/フォーマットへの影響を避ける必要があります

var addToArray, adderArray;
if(tagsFirst){ addToArray = arrayOfTags; adderArray = taglessArray; }
else { addToArray = taglessArray; adderArray = arrayOfTags; }

var oLen, //used to retain 'original length'
i2 = oLen = (tagsFirst.length + arrayOfTags.length),
rejoinArray = [];

while(i2--){ //not 100% sure I got this right - hope you get the general idea
    var currentKey = oLen - 1 - i2;
    //if first or alternating from first 0,2,4,etc...
    if(currentKey === 0 || ( currentKey % 2 === 0) {
        rejoinArray[currentKey] = addToArray.shift(); //remove first element and return
    }
    //should be keys 1,3,5,etc...
    else {
        rejoinArray[currentKey] = adderArray.shift();
    }
}

もちろん、上記のすべては非常にテストされておらず、おそらくバグがある/間違っている可能性がありますが、基本的な考え方はかなりクールだと思います. タグを剥がします。タグなしの単語の配列を、使用できるスパンでラップします。次に、すべてのばかげたタグをつなぎ合わせます。それらはすべて同じ単語をラップする必要があります。これは、基本的な HTML の整合性を前提としています。テキスト ブロックには、単語または単語セットを囲むインライン表示タグのみが含まれています。不適切にネストされたスパンがない限り、不適切なネストは問題にならない可能性があります。

于 2012-07-08T01:20:32.663 に答える