☰

contenteditable のプレースホルダー - フォーカス イベントの問題 質問する

tag-icon • tag-icon javascript jquery focus contenteditable caret
contenteditable のプレースホルダー - フォーカス イベントの問題 質問する

以前もこの質問を試みましたが、バグが発生する動作例を説明/証明することができませんでした。そこで、もう一度試してみます。

私は、コンテンツ編集可能な DIV でプレースホルダー効果を再現しようとしています。コアとなる概念はシンプルです。

<div contenteditable><em>Edit me</em></div>

<script>
$('div').focus(function() {
    $(this).empty();
});
</script>

これは時々機能しますが、プレースホルダーに HTML が含まれている場合、または他の処理が行われている場合は、編集可能な DIV のテキスト キャレットが削除され、ユーザーは編集可能な DIV を再度クリックして入力を開始する必要があります (フォーカスがまだある場合でも)。

例：http://jsfiddle.net/hHLXr/6/

ハンドラー内でフォーカス トリガーを使用することはできません。イベント ループが作成されるためです。そのため、編集可能な DIV 内のキャレット カーソルを再設定するか、他の方法で再度フォーカスする方法が必要です。

ベストアンサー1

以下は、他の回答の一部を補足する CSS のみのソリューションです:-

<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
    [contentEditable=true]:empty:not(:focus)::before{
        content:attr(data-ph)
    }
</style>

編集: これが codepen の私のスニペットです ->http://codepen.io/mrmoje/pen/lkLez

編集2: この方法は、すべての行で aまたはを<br>実行した後に div に残りの要素が存在するため、複数行のアプリケーションでは 100% 機能しないことに注意してください。クレジット:- @vsync Backspace は正常に機能するようです (少なくとも webkit/blink では)select-all-cutselect-all-delete

おすすめ記事