html中span里面有占位符,jquery – 当span元素不包含文本时,请填充占位符文本

在得到一个很好的答案后,我发现这可能是

Placeholder in contenteditable – focus event issue的重复

我有一个HTML< span>元素与contenteditable =“true”.我的目标是利用span元素创建一个无缝的“输入”字段.我在解决以下问题时遇到问题：

> DOM加载< span> “制作新标签”的可编辑和默认文字.

>当用户点击< span>时文字更新说’开始打字..’

>在第一次按键时,删除< span>文本并开始填写用户输入

>如果< span>没有文字,用户仍在编辑,用“开始输入…”替换文字

>如果< span>没有文字,用户没有互动,用’制作新标签’替换文字.

它的工作原理除了当用户正在编辑元素并清除所有文本时,该元素将折叠并变为不可编辑.我需要确保< span>中的文本始终存在或者我需要找到处理这些案件的另一种方法

这是我正在使用的元素：

*注意：我使用的是jQuery,Bootstrap和FontAwesome

Make a new tag ..

而我的javascript：

$('#new-tag').click(function(){

if( $(this).data('editing') !== 'active'){

$(this).text('Start typing ..');

}

});

// i do it this way because when .text('') is used,the breaks

$('#new-tag').keydown(function(e){

if( $(this).data('editing') !== 'active'){

$(this).text(String.fromCharCode(e.charCode));

}

$(this).data('editing','active');

});

$('#new-tag').change(function(){

if( $(this).data('editing') == 'active' && $(this).text() == ''){

$(this).text('Make a new tag ..');

$(this).removeData('editing');

}

});

有人可以让这种魔力发生吗？我发布的Here is a fiddle.