1

クロムの選択範囲を div に含めるのに問題があります。それをもっと広くしたいのです。プレイグラウンドはこちら: http://jsbin.com/ujafow/28/

私の例で 1.2(a) から 1.2 までを選択すると、選択境界線が 1 の端までずっと出ていることがわかります。それ。興味深いことに、それは外側の div の端までは行き渡らないので、それを含む何らかの方法があるに違いありません。他のブラウザ (例: ie) はテキストを選択するだけのようで、何もかもうまくいきません。

論理的な境界内にとどめるために何をする必要があるか知っている人はいますか?

PS。同じ結果のリストを試してみました:http: //jsbin.com/ujafow/7 PPS。テーブルはうまく機能しますが、 contentEditable であるため、テーブルを編集する必要がないため、複雑になります。PPS。Chrome には、これについて長い未解決の欠陥があります。

編集： contentEditable になっているものの端に選択を描画するように見えます-すべてを contentEditable にすると、端まで描画されます。それを止めるように見える唯一のことは、左側にdivがある場合です...おそらく、選択範囲の描画をその領域だけに制限するために、両側に空のdivを置くことができます...?

4

3 に答える 3

1

CSSに追加overflow: hidden;すると修正されるようです。.npse

私は以前にあなたの解決策を試していました...うまくいきましたが、操作が非常に面倒でした. しかし、これが正しければ、私に感謝しないでください...質問に対する私の内線に答えてくれた@ralph.mに感謝します：

::select 疑似要素が塗りつぶしスペースで無視され、選択範囲が範囲外になります...?

ループを閉じるための答えとしてそれを提供するだけで、それが正しい場合はそれを受け入れることができます-この質問に出くわした他の人をしばらく救うた​​めに!

于 2014-03-13T03:30:44.887 に答える
0

タイトル スパンから「contenteditable=false」を削除するだけです。少なくとも、それは私にとってはうまくいきました。

編集：動作するようになりました。ここで確認してください。 変更可能なサイズと隅にある小さなものを削除する方法を理解する必要があります.

textarea {
background:transparent;
border:none;
}
textarea:focus {
border:none;
outline:none;
}

EDIT EDIT: これを使う

textarea {
resize: none;
}

EDIT EDIT EDIT: よし、やっとわかった。

<p  contentEditable="true"><span class="counter" 
contentEditable="false">1.2</span>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Cras scelerisque molestie nisi, ut accumsan libero rutrum non. Ut non scelerisque 
lacus. Proin ornare rhoncus lobortis. Nullam id laoreet justo, et bibendum justo. Etiam 
luctus ligula faucibus, eleifend augue tempor, dapibus nunc.</p>

ここで動作します。本文から「contenteditable」を削除し、個々の要素に追加するだけです。ただし、:focus の境界線とアウトラインを削除する必要があります。

PS: :P :D for OCD

于 2013-08-05T08:09:50.217 に答える
0

絶対位置の div を左側に配置することでこれを解決しました (以下のコードでは「タイトル コンテナー」と呼んでいます)。次に、選択が適切に含まれます。title-container div は、elementToContain div の子です。div のサイズは js を介して設定されます。

.elementToContain {
    position: relative;
    padding: 0.5em; 
}

.title-container {
    position: absolute;
    top: 0em;
    bottom: 0em;
    border: ridge red 0.1em;
    left: 0;
    padding-right: 0.25em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -user-select: none;
}
于 2013-08-15T23:30:51.120 に答える