web-dev-qa-db-ja.com

Chrome contenteditableに表示されない編集カーソル

Chromeを使用してこのページを開くと（ ライブデモ を参照）：

<span id="myspan" contenteditable=true></span>

CSS：

#myspan { border: 0; outline: 0;}

JS：

$(myspan).focus();

contenteditablespanにはフォーカスがあります（書き始めることができ、すでにフォーカスされていることがわかります）が、「I」編集カーソルは表示されません。 。

このカーソルを表示させる方法は？（備考：outline:0が必要です。また、空白がなくてもスパンが空であるという事実が必要です。

注：Firefoxではカーソルが表示されます。

javascriptjquerycssgoogle-chromecontenteditable
22
Basj

解決策は、<span>を<div>に変更することです（これにより、他の質問の多くのcontenteditable問題が解決されることがわかりました）+ min-widthを追加します。

実際、次のコードを使用すると、<div>のサイズは0px x 18pxになります。キャレット（カーソルの編集）が非表示になる理由を説明します！

HTML

<div id="blah" contenteditable=true></div>

CSS

#blah {
    outline: 0;
    position: absolute;
    top:10px;
    left:10px;
}

JS

$("#blah").focus();

次に、追加

min-width: 2px;

cSSでははChromeを使用してもキャレットを表示できるようにします： http://jsfiddle.net/38e9mkf4/ 2 /

3
Basj

問題は、spansがインライン要素であることです。 CSSに_display:block;_を追加するだけで問題が解決します。

$(myspan).focus();
_#myspan {
    border: 0;
    outline: 0;
    display: block;
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>_
18
imtheman

左側にパディングを追加すると、カーソルが表示されます。

#myspan
{
    border: 0; 
    outline: 0; 
    min-width: 100px; 
    height: 30px; 
    padding-left: 1px;
}

jsFiddleのデモ

9
Luke
.cont_edit {
  outline: 1px solid transparent;
}
6
Aleksey Dubinskiy

これは、空のContentEditable領域がレンダリングされる方法に関係しています。フォーカスの問題ではないことを証明するには、編集可能なdivにテキストを追加してから削除します。最後の文字がなくなると、カーソルが消えます

質問から キャレット位置をcontentEditable要素内の空のノードに設定

選択/範囲モデルは、要素の境界を無視して、テキストコンテンツへのインデックスに基づいています。テキストのないインライン要素内に入力フォーカスを設定することは不可能かもしれないと思います。確かにあなたの例では、クリックや矢印キーで最後の要素内にフォーカスを設定することはできません。

各スパンを_display: block_に設定すると、ほぼ機能しますが、親の空白の存在に応じて、非常に奇妙な動作がまだいくつかあります。表示をハックして、フロート、インラインブロック、絶対位置などのトリックでインラインに見えるようにするIE各要素を個別の編集ボックスとして扱います。相対位置のブロック要素を隣に配置すると機能しますが、それはおそらく非現実的です。

_&#8203;_のようなゼロ幅文字を追加することもできます

document.getElementById('myspan').focus();
_#myspan {
    border: 0;
    outline: 0;
}_
_<span id="myspan" contenteditable="true">&#8203;</span>_
4
KyleMit

私にとっては、contenteditable divのコンテンツを<br>に設定すると機能します。 nbsp;に設定してみましたが、編集を開始する前にdivに余分な文字スペースが作成されます。だから、私はこれを選びます：

<div id="blah" contenteditable=true><br></div>

以上：

<div id="blah" contenteditable=true>nbsp;</div>

お役に立てれば。

1
jsbisht

CSSスタイルを追加

min-height: 15px;

あなたも必要かもしれません

display: block;

あなたのcontenteditable="true" 鬼ごっこ

0
Serj Sagan