0

Jクエリ

 function placehold(id,placeholder) // id of element and placeholder text
{
    $("#"+id).text(placeholder); //initialize form field

}
    $(document).ready(function() {


       document.getElementById("editable").addEventListener("input", function() {

         if ($(this).text()==(""))
        {
           placehold('editable','Please enter a name');
        }

       }, false);

        var originaltext = $('#editable').text();

}

HTML

<div id="editable" contentEditable="true"><?php 

    if(!empty($row['Name']))
    {
        echo $row['Name'];

    }
    else
    {

    echo "Please enter a name";
    }
        ?>
     </div>

「編集可能」が空の場合、プレースホルダー「名前を入力してください」が表示されます

テキストボックスに入力すると、プレースホルダーがテキストと一緒に存在します

DIV 内に入力しようとしたときにプレースホルダーを削除するにはどうすればよいですか?

4

4 に答える 4

1

これがあなたの解決策です：

// html コード

<div id="editable" contentEditable="true"></div>

// Java スクリプト コード

$(document).ready(function () {    
    var newText, originaltext = '';

    $('#editable').html(function () {        
        if ($.trim($(this).html()) == "") {
            placehold('editable', 'Please enter a name');
            originaltext = $.trim($('#editable').html());
        }
    });
    $('#editable').click(function () {        
        if ($.trim($(this).html()) == originaltext) {
            placehold('editable', '');
        } else {
            placehold('editable', newText);
        }
    });
    $('#editable').blur(function () {         
        newText = $('#editable').html();               
        if ($.trim($(this).html()) != originaltext && $.trim($(this).html()) !='') {            
            placehold('editable', newText);
        } else {
            placehold('editable', originaltext);
        }
    });

});
function placehold(id, placeholder) {
    $("#" + id).html(placeholder);
}

デモ

デモリンク

于 2013-06-06T08:03:55.367 に答える
0

この Text-Box Hints Pluginを使用してみてください。
contenteditable の div でも機能します。
ここにデモがあります。

于 2013-06-06T07:49:27.293 に答える
0

このコードは、通常のプレースホルダーとまったく同じように実行されます。

  • プレースホルダーのテキストの場合、テキストは灰色です
  • 入力を開始すると、プレースホルダー テキストが消えます
  • テキストが空の場合、プレースホルダーが復元されます
  • プレースホルダーが表示されているときにフォーカスすると、カーソルが先頭に移動します

フィドル: http://jsfiddle.net/WyGVA/5/

<div id="editable" contentEditable="true" tabindex="0">Please enter a name</div>

に注意してください。これは、Firefox を使用しているユーザーがイベントをtabindexトリガーできるように追加されています。keydownkeyup

これは、jQuery ライブラリを使用したすべての JavaScript です。

$(document).ready(function () {
    $('#editable').click(function () {
        var $this = $(this),
            text = $.trim($this.text().toLowerCase());

        // Force cursor at the beginning
        if (text === 'please enter a name') {
            $this.text('');
            $this.focus();
            $this.text('Please enter a name');
        }
    });

    $('#editable').keydown(function (event) {
        var $this = $(this),
            text = $.trim($this.text().toLowerCase());

        if (text === 'please enter a name') {
            $this.text('');
            $this.css('color', 'black');
        }
    });
    $('#editable').keyup(function (event) {
        var $this = $(this),
            text = $.trim($this.text().toLowerCase());

        if (text === '') {
            $this.text('Please enter a name');
            $this.css('color', 'grey');
        }
    });
});

お役に立てれば！

編集: div にフォーカスしたときにカーソルを先頭に移動するように更新しました。このコードは、プレースホルダーをどこかに保存することでよりきれいになる可能性がありますが、それは主に、先に進むのに役立つためです。幸運を！

于 2013-06-06T08:14:43.563 に答える