Question

Jquery

 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内输入时，如何让占位符消失？

Answer 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);
}

<强>演示

Demo Link

Answer 2

尝试使用this Text-Box Hints Plugin。
它也适用于具有contenteditable的div。
这是Demo。

Answer 3

这是一个快速简单的例子，可以帮助您入门。

HTML

<input type='text' id='in' value='Enter Something...'>

的JavaScript

$('#in').bind({
    click : function() {
        $(this).css('color','#ccc');
    },
    focusout : function() {
        $(this).css('color','#000');
    },
    keydown : function() {
        $(this).val('');
        $(this).css('color','#000');
        $(this).unbind('keydown');
        $(this).unbind('click');
    },
});

祝你好运

Answer 4

此代码将与普通占位符完全相同：

当文本为占位符的文本
当您开始输入
当文本为空时，将恢复占位符
在显示占位符时进行对焦，光标移至开头

FIDDLE ：http://jsfiddle.net/WyGVA/5/

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

请注意tabindex，这已添加，因此使用Firefox的用户将能够触发keydown和keyup个事件。

这是使用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时开始移动光标。通过在某处保存占位符，此代码可以更清晰，但它主要是为了帮助您进一步开展。祝你好运！

当我在div中键入内容时，如何使占位符消失？

4 个答案: