Javascript 添加'；占位符'；使用JS将文本转换为元素

-

这方面已经有一些帖子了（）但它们并不能真正适应这种情况

我有一个快捷码，可以根据CRM中的自定义字段动态生成文本内容，用于显示用户软件的序列号，如下所示：

序列号的直接父容器是

#copyTarget2

当容器为空时，它仍在页面上呈现，但没有内容，如下所示：

我需要在空容器中填充“占位符”文本，但不是您可以键入的那种文本，这样就可以看到只读取-“无活动序列号””的文本

最后，当填充字段时，占位符文本需要隐藏，它如何隐藏并不重要，只要它不可见并且不影响快捷码生成的文本

---

我还试着改编这个JS小提琴：

发件人：

致：

---

CSS和HTML对我来说就像第二种语言，但我对JS还不熟悉，所以我可以稍微修改一下代码，但我还不会写它，我想知道最好的JS解决方案是什么，为什么？

我认为您需要在span元素中使用类似于

占位符的效果，而不是输入标记。尝试使用一些css。请参阅下面的代码片段。并使用
jquery
函数添加属性

见


jQuery（'#copyTarget2'）。每个(
功能（i，el）{
如果（！$（el）.text（）||$（el）.text（）.trim（）=''）{
$（el）.attr（'占位符'，'无有效序列号'）
/*或：
el.placeholder=$（'label[for='+el.id+']'）。text（）；
*/
}
});
span:empty:before{
字号:12 ;；
颜色：#9E9E9E；
线高：40px；
文本缩进：20px；
内容：attr（占位符）；
显示：块；
边框：1px纯灰；
}
跨度{
位置：绝对；/*或根据您的意愿对父元素进行修正*/
宽度：200px；/*或根据您的意愿对父元素进行修正*/
高度：50px；/*或根据您的意愿对父元素进行固定*/
}
我认为您需要在span元素中使用类似于
占位符的效果，而不是输入标记。尝试使用一些css。请参阅下面的代码段。并使用
jquery
函数添加属性

见


jQuery（'#copyTarget2'）。每个(
功能（i，el）{
如果（！$（el）.text（）||$（el）.text（）.trim（）=''）{
$（el）.attr（'占位符'，'无有效序列号'）
/*或：
el.placeholder=$（'label[for='+el.id+']'）。text（）；
*/
}
});
span:empty:before{
字号:12 ;；
颜色：#9E9E9E；
线高：40px；
文本缩进：20px；
内容：attr（占位符）；
显示：块；
边框：1px纯灰；
}
跨度{
位置：绝对；/*或根据您的意愿对父元素进行修正*/
宽度：200px；/*或根据您的意愿对父元素进行修正*/
高度：50px；/*或根据您的意愿对父元素进行固定*/
}
使用：empty和：before with属性在占位符为空时设置占位符


[数据占位符]：空：之前{
颜色：#AAA；
内容：attr（数据占位符）；
}



我使用：empty和：before with属性设置占位符为空时的文本


[数据占位符]：空：之前{
颜色：#AAA；
内容：attr（数据占位符）；
}



我有文本
，你可以用jQuery做
$（'#id'）.attr（'placeholder'，'value'）
-我不明白你的意思。但是你需要在span元素而不是input标记中使用类似
placeholder的函数。对吗？如果你把HTML标记放在帖子中，这样我们就知道你在用什么了。@epascarello HTML:
[memb_contact fields=“_AFXSerial”]”
由于没有输入，您的占位符代码将无法工作，您需要使用CSS解决方案。使用jQuery，您可以执行
$（'#id'）.attr（'占位符'，'值'）
-我不明白你的意思。但是你需要在span元素中使用类似于
占位符的函数，而不是输入标记。对吗？如果你在文章中添加HTML标记，这样我们就知道你在使用什么了，这会有所帮助。@epascarello HTML:
[memb_contact fields=“\u AFXSerial”]
由于没有输入，您的占位符代码将无法工作，因此您需要使用CSS解决方案。span没有值…实际上不需要JavaScript，只需要CSS和attribute@epascarello
而且确实不需要JavaScript
那么如何验证元素是否为空？@prasad hi谢谢，我试过了，但它似乎没有在页面上呈现任何内容，因为在页面的许多元素中添加了1px的灰色边框（如您提供的CSS中所指定的那样），所以不需要
content:attr（）
和
颜色是主色。@prasad很奇怪，它似乎在前端没有显示任何内容，#copyTarget2框仍如问题所示（即0x0大小）跨度没有值……而且实际上不需要JavaScript，只需要CSS和attribute@epascarello
而且确实不需要JavaScript
那么如何验证元素是否为空？@prasad hi谢谢，我尝试了这个，但它似乎没有在页面上呈现任何内容，因为添加了1px的灰色边框（如您提供的CSS中所指定）对页面的许多元素顺序不必要
content:attr（）
和
color
是主要的。@prasad很奇怪，它似乎没有在前端显示任何内容，#copyTarget2框仍然显示问题中的内容（即0x0大小）
$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = 'placeholdertext';
            /* or:
            el.placeholder = $('label[for=' + el.id + ']').text();
            */
        }
    });

jQuery('#copyTarget2').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = 'No valid serial number.';
            /* or:
            el.placeholder = $('label[for=' + el.id + ']').text();
            */
        }
    });