Question

在输入框处于焦点位置时，我试图选择第一个输入组插件。

到目前为止，我已经尝试过，但是设法只选择了第二个输入组项目。

这是我的HTML

.container {
  margin-top: 40px;
}

.form-control:focus+.input-group-addon {
  color: #f00 !important;
}

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <h3>Focus on me</h3>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
    <span class="input-group-addon">@</span>
  </div>

  <hr>
  <h4>Please help!!!</h4>
  <p>I want to change the color of the first input group addon and not the second</p>
</div>

Answer 1

如果要保持与当前相同的HTML结构，则必须在DOM中上移以修改指定的addon元素。这将需要Javascript。

使用Javascript，我们要检查元素是否处于焦点或模糊状态。我们可以使用内联onfocus和onblur或仅通过添加事件侦听器来做到这一点。

一旦添加了侦听器，就需要相对于当前元素找到要更改的元素，并根据其模糊或聚焦来对其进行更新。

var input = document.querySelector('.input-group input.form-control');

// On element focus
input.addEventListener("focus", function() {
  var container = input.parentNode;
  var addon = container.querySelector('.input-group-addon');
  
  addon.style.color = 'red';
});

// On element blur
input.addEventListener("blur", function() {
  var container = input.parentNode;
  var addon = container.querySelector('.input-group-addon');
  
  addon.style.color = 'black';
});

.container {
  margin-top: 40px;
}

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <h3>Focus on me</h3>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
    <span class="input-group-addon">@</span>
  </div>

  <hr>
  <h4>Please help!!!</h4>
  <p>I want to change the color of the first input group addon and not the second</p>
</div>

我的示例可以压缩，但这只是实现目标所需要做的一般想法。

选择输入焦点上的第一个输入组项目

1 个答案: