大佬教程收集整理的这篇文章主要介绍了jquery – 当span元素不包含文本时,请填充占位符文本，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个HTML< span>元素与contenteditable =“true”.我的目标是利用span元素创建一个无缝的“输入”字段.我在解决以下问题时遇到问题：
> DOM加载< span> “制作新标签”的可编辑和默认文字.
>当用户点击< span>时文字更新说’开始打字..’
>在第一次按键时,删除< span>文本并开始填写用户输入
>如果< span>没有文字,用户仍在编辑,用“开始输入…”替换文字
>如果< span>没有文字,用户没有互动,用’制作新标签’替换文字.
它的工作原理除了当用户正在编辑元素并清除所有文本时,该元素将折叠并变为不可编辑.我需要确保< span>中的文本始终存在或者我需要找到处理这些案件的另一种方法
这是我正在使用的元素：
*注意：我使用的是jQuery,Bootstrap和FontAwesome
<span class="badge"><span contenteditable="true" id="new-tag" class="badge alert-info">Make a new tag ..</span><i class="fa fa-lg fa-plus-circle"></i></span>
而我的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 <span> 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.
span.badge[contenteditable] {
display: inline-block;
}
span.badge[contenteditable]:empty::before {
content: 'Make a new tag';
display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
content: 'Start typing';
}
并且为了使其更具可定制性,给定HTML中的data- *属性：
<span class="badge">
<span contenteditable="true" id="new-tag" class="badge alert-info" data-placeholder="Make a new tag" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
</span>
span.badge[contenteditable] {
display: inline-block;
}
span.badge[contenteditable]:empty::before {
content: attr(data-placeholder);
display: inline-block;
}
span.badge[contenteditable]:empty:focus::before {
content: attr(data-focused-advice);
}
参考文献：
>兼容性：
> CSS generated content (::before/::after)
> :empty (and other ‘CSS 3’ selectors).
> CSS：
以上是大佬教程为你收集整理的jquery – 当span元素不包含文本时,请填充占位符文本全部内容，希望文章能够帮你解决jquery – 当span元素不包含文本时,请填充占位符文本所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。