0

私はこの問題に数週間オフとオンで取り組んでいます。私がやろうとしているのは、ユーザーが入力できる場所を示すプレースホルダーを用意することです。彼らが入力すると、プレースホルダーが消えて、div が空のときに再び表示されるようにします。

私が見つけたすべてのことは、入力とテキストエリアのクロスブラウザープレースホルダーサポートに関係しており、それらのコードを私の問題に適用しようとすると失敗します.

タイトルには h1s を、説明には標準の div を使用しています。

私のコードは次のようになります。

HTML

<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>

jQuery

var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);

もっとjQueryコードを持っていますが、それはひどいです。現在、キーアップを使用してプレースホルダーを非表示にしていますが、明らかに機能していません。誰かが私を助けることができますか？

私はバニラ JavaScript の使用にも完全にオープンです。

4

5 に答える 5

1

CSSでそれを行う方法があります（最新のブラウザのみ）

        .pageDesc:empty:after {content : "Write your description here.";}
于 2013-11-06T18:58:06.047 に答える
1

jQuery の Blur および Focus イベント ハンドラーを使用して、Div の Text 値を確認してみませんか?

クイックルックのコード:

$('[contenteditable="true"]').blur(function() {
    var text = $.trim($(this).text());
    var ph = $('<span/>',{ 'class':"placeholder"})
        .text($(this).data('placeholder')||'');
    if (text == '') {
        $(this).html(ph);
    }
}).focus(function() {
    if ($(this).children('.placeholder').length > 0) {
        $(this).html('<span>&nbsp;</span>');
    }
});

たとえばフィドル: http://jsfiddle.net/qvvVr/1/

于 2013-11-06T19:49:35.847 に答える