Question

我想在标签标签中隐藏文本，而不是输入文本。我想这样做而不更改html结构。我想使用css3甚至jquery来实现这一点

这是html代码：

<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

我尝试过但是没有运气

.es-field-wrap+label { display:none; }

.es-field-wrap > label { display: none; }

Answer 1

尝试一下

电子邮件*

<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

//split text to <br> tag
    var t = $(".es-field-wrap > label").html().split("<br>");
    //set secont part of test in label
    $(".es-field-wrap > label").html(t[1]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="es-field-wrap">
<label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

Answer 2

CSS

带有visibility: visible的子元素在带有visibility: hidden的父元素中仍然可见。或者，您可以制作标签color: transparent，但如果用户通过选择突出显示它，则可以将其显示出来。

BTW .es-field-wrap+label必须具有.es-field-wrap之外的标签才能正常工作。

两种技术都在演示1中。

jQuery / JavaScript

当涉及文本时，

缺少jQuery。 JavaScript更强大。

$('.es-field-wrap label')[0]...

上面的代码是一个jQuery对象，已被取消引用到普通JavaScript对象中（请注意[0]）。

.childNodes[0].remove()

.childNodes是一个普通的JavaScript属性，不仅可以获取标签的子元素，还可以获取文本。 Email*实际上是标签的第一个子节点，因此.childNodes[0]。 .remove()方法非常不言自明。

有关此jQuery / JavaScript声明，请参见演示2。

演示1-CSS隐藏

.es-field-wrap label {
  visibility: hidden
}

.es-field-wrap label input {
  visibility: visible
}

.es-field-wrapA label {
  color: transparent;
}

<div class="es-field-wrap">
  <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

<div class="es-field-wrapA">
  <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

演示2-删除jQuery / JavaScript

$('.es-field-wrap label')[0].childNodes[0].remove();

<div class="es-field-wrap">
  <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您可以使用CSS opacity 属性：

label {
  opacity: 0.5;
}

在w3网站上查看有关该属性的更多信息：https://www.w3schools.com/cssref/css3_pr_opacity.asp

Answer 4

尝试

<html lang="en">
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    </head>

    <body>
        <div class="es-field-wrap">
            <label>Email*<br><input class="es_required_field es_txt_email" type="email" name="email" value="" placeholder="Your email address" required=""></label>
        </div>
    </body>
</html>

<script>
    $(document).ready(function () {
        //split text to <br> tag
        var t = $(".es-field-wrap > label").html().split("<br>");
        //set secont part of test in label
        $(".es-field-wrap > label").html(t[1]);

    });
</script>

Answer 5

.es-field-wrap label {
  font-size:   0px;
}

如何仅隐藏标签内的文本而不隐藏其他html元素

5 个答案:

CSS

jQuery / JavaScript

演示1-CSS隐藏

演示2-删除jQuery / JavaScript