输入处于活动/焦点时删除表单标签

Question

当输入处于活动/聚焦状态时，尝试删除图标。问题是：以后不工作。当我点击输入时，标签仍然可见。

尝试使用content: none;但是没有用。

＆＃13;

＆＃13;

#search-label {
	position: relative;
	font-weight: normal;
}

#search-label:before {
	content:"\f002";
    font-family: FontAwesome;
    font-size: 115%;
    position: absolute;
    color: #dddddd;
    top: 5px;
    left: 8px;
}

＆＃13;

＆＃13;

＆＃13;

修改：

<div class="form-group">
    <label id="search-label">
        <input id="search-form" class="form-control" placeholder="{% trans "Search" %}" type="text" name="q" value="{{ request.REQUEST.q }}">
    </label>
</div>

我可以使用CSS执行此操作还是需要JavaScript？

图片： http://imgur.com/a/pA1uN

Answer 1

这实际上取决于你的标记，如果你有自由和/或修改它的能力。

是的，可以更改标记：仅限CSS的解决方案

如果您的标签是兄弟并且在输入后发生，您可以根据输入元素本身的状态切换其显示状态，例如：

＆＃13;

＆＃13;

.input-row {
  position: relative;
}
.input-row label {
  position: absolute;
  left: 0;
}
.input-row label::before {
  transition: 1s;
  /* Just to show how the toggle works */
}
.input-row label.icon1::before {
  content: 'icon1';
}
.input-row label.icon2::before {
  content: 'icon2';
}
.input-row input {
  padding: 0 2rem 0;
}
.input-row input:focus + label::before,
.input-row input:active + label::before {
  opacity: 0;            /* To visually hide the label's pseudoelement */
  pointer-events: none;  /* To prevent any cursor-based interaction */
}

＆＃13;

<form>
  <div class="input-row">
    <input type="text" name="input1" id="input1" />
    <label for="input1" class="icon1"></label>
  </div>
  <div class="input-row">
    <input type="text" name="input2" id="input2" />
    <label for="input1" class="icon2"></label>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

不，标记无法更改：仅JS解决方案

如果无法更改标记，您将被迫使用仅限JS的解决方案。这是因为CSS不具有向后遍历（即选择先前的兄弟姐妹）或向上遍历父节点（即选择包裹元素）的能力。请记住，由于伪元素不是DOM的一部分，因此无法通过JS 选择它们。相反，您必须切换一个类才能执行隐藏/显示。

在我的概念验证示例中，使用您在更新问题后提供的标记，您可以看到如何使用jQuery来实现所需的功能。你当然可以在本机JS中重写JS函数;）

＆＃13;

＆＃13;

$(function() {
  $('.form-group :input')
    .focus(function() {
      $(this).closest('label').addClass('hide');
    })
    .blur(function() {
      $(this).closest('label').removeClass('hide');
    });
});

＆＃13;

label {
  position: relative;
  font-weight: normal;
}
label::before {
  content: "icon";
  font-family: FontAwesome;
  font-size: 115%;
  position: absolute;
  top: 5px;
  left: 8px;
  transition: 1s;        /* Added just to show the effect of toggling opacity */
}
label.hide::before {
  opacity: 0;            /* To visually hide the label's pseudoelement */
  pointer-events: none;  /* To prevent any cursor-based interaction */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label id="search-label">
    <input id="search-form" class="form-control" placeholder="Search" type="text" name="q" value="">
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

jQuery解决方案看起来像这样：

$("input").focus(function(){
    $("span#your_icon").hide();
}).blur(function(){
    $("span#your_icon").show();
});

JS解决方案如下所示：

document.getElementById("myInput").addEventListener("focus", function(){
    document.getElementById("#your_icon").style.display = 'none';
});

document.getElementById("myInput").addEventListener("blur", function(){
    document.getElementById("#your_icon").style.display = 'inline';
});

Answer 3

您可以使用背景图片代替标签，并执行类似这样的操作

.input-search {
    background:url('http://www.aljanaedu.com/Limitless/images/icons/14x14/search.png') no-repeat left 10px center;
 }
.input-search:focus {
    background-image:none;
}

工作小提琴here