具有多个输入的表单。是否填充显示/隐藏输入标签答案

【问题标题】：Form with multiple inputs. Show/hide label for input if filled or not具有多个输入的表单。是否填充显示/隐藏输入标签
【发布时间】：2021-04-11 11:24:13
【问题描述】：

当输入被聚焦或填充时，我尝试构建将占位符移动到输入顶部的表单。但是我在同一页面上有多个输入的问题。我不知道如何针对特定的（当前使用）。一切正常，但我的 JS 代码会影响我的页面/表单上的所有输入。因此，当我填写例如第二个输入时，所有标签都会显示。我可以使用#id_name 来做到这一点，但我的页面有很多表单和输入，我想在整个网站上使用这个功能。如何定位当前使用的唯一输入？

这是我的 JS

    $('.h-placeholder').keyup(function() {
      
      // If input is not empty
      if ($(this).val().length == 0) {
        // hide label
        $('.hideme label').css({"opacity": "0"});
      } else {
        // Otherwise show it
        $('.hideme label').css({"opacity": "1"});
      }
    }).keyup();

HTML

<div class="row">
<div class="col-12">
<div class="gray-input hide-placeholder hideme">
<input class="h-placeholder" required type="text" id="zaw" name="zaw" placeholder="Zaw">
<label class="label-h-placeholder" for="zaw">Zaw</label>
</div><!--.gray input-->
<div class="gray-input hide-placeholder hideme">
<input class="h-placeholder" required type="number" id="wart" name="wart" placeholder="Wart">
<label class="label-h-placeholder" for="wart">Wart</label>
</div><!--.gray input-->
</div>  
</div><!--.row-->

还有我的 CSS

.hide-placeholder{
    position: relative;
}
.hide-placeholder > label {
    opacity: 0;
    position: absolute;
    top: -5px;
    background: #efeff3;
    padding: 0 8px;
    border-radius: 5px;
    left: 3%;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}
.hide-placeholder input:focus + label,
.hide-placeholder textarea:focus + label{
    opacity: 1;
    transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
}
.hide-placeholder input:focus::placeholder,
.hide-placeholder textarea:focus::placeholder{
    opacity: 0;
}

【问题讨论】：

标签： javascript html jquery css placeholder

【解决方案1】：

也许这就是你需要的：

$('.h-placeholder').on("input",function(){$(this).next("label")
  .toggle((this.value=="" ||          
    this.type=="number" && +this.value == 0))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="gray-input hide-placeholder hideme">
<input class="h-placeholder" required type="text" id="zaw" name="zaw" placeholder="Zaw">
<label class="label-h-placeholder" for="zaw">Zaw</label>
</div><!--.gray input-->
<div class="gray-input hide-placeholder hideme">
<input class="h-placeholder" required type="number" id="wart" name="wart" placeholder="Wart">
<label class="label-h-placeholder" for="wart">Wart</label>
</div><!--.gray input-->
</div>  
</div><!--.row-->

脚本将根据输入的当前长度使当前输入后面的标签可见/不可见。当您通过鼠标操作将内容粘贴到输入字段时，“输入”事件也会触发。

【讨论】：

但是当值不 = 0 时，此脚本使其不可见。我想在输入已填充时保持标签可见。
使用 CSS 默认隐藏标签
是的，我试图将您的 sn-p 减少到“核心”。也许，我走得太远了。我想展示的是，您可以在一个简单的表达式 (.toggle()) 中更改元素的可见性，而无需使用太多其他内容。我再次更改了答案以保持标签显示该值是否为“0”。
嗯，我找到了仅使用 CSS 的解决方案：jsfiddle.net/273ntk5s/2 也许这样会更好。

【解决方案2】：

$('.hideme label')

选择每个占位符。试试

$(this).parent().find('label')

【讨论】：