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

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中键入内容时，如何使占位符消失？

尝试使用。
它也适用于具有contenteditable的div。

---

这是一个。

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

HTML

祝你好运这是你的解决方案：

//html代码

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

$(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);
}

演示

---

此代码将完全作为普通占位符运行：

• 占位符的文本为灰色
• 开始键入时，占位符文本将消失
• 文本为空时，将恢复占位符
• 当显示占位符时，聚焦时，光标移动到开始处

小提琴：

希望这有帮助

编辑：更新为在聚焦div时在开始处移动光标。

---

通过将占位符保存在某个地方，这段代码可能会更简洁，但它主要是为了帮助您进一步了解。祝你好运

为什么要用占位符文本呢？请改用占位符属性。@Rinku divs没有占位符属性，我猜他想在div中设置元素的样式，这样他就不能使用文本框或输入字段。是的，完全正确……没有占位符属性，所以我只能用一种很难的方式来做。单击元素时，文本会消失，占位符在用户开始打字之前一直保持着。我使用DIV，而不是TeXBOX。这个代码的下落是，它不删除焦点上的占位符，而是在KEYDOWN上，使您能够将插入符号放在占位符的中间，这可能是非常混乱的。

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

$(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);
}

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

$(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');
        }
    });
});