0

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

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

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

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

祝你好运

于 2013-06-06T07:58:40.817 回答
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>

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

这是所有的 javascript，使用 jQuery 库：

$(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 回答