Question

当用户单击输入字段以输入内容和/或单击div区域时，我想更改输入字段所在的div的颜色。如果用户决定不输入任何内容或删除他们在输入字段中输入的内容，它将恢复为默认颜色。

下面的链接展示了我想要实现的目标。我目前在div上设置了一个活动状态，以展示我希望div更改为哪种颜色。我意识到，我将需要合并javascript以实现我想要发生的希望。有人愿意提供帮助吗？谢谢。

代码： https://jsfiddle.net/L1ptj0ey/3/

HTML

.other-area {
    width: 100%;
    height: 3.5rem;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
    background-color: #cccbc9;
    border-radius: 4px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: .9rem;
}

.other-area:active {
    background-color: #cd1e41;
    color: #FFF;
}

.other-input {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    height: 3.3rem;
    width: 19.3rem;
    margin-top: .1rem;
    margin-left: .9rem;
    padding-left: .5rem;
    color: #cccbc9;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: "Source Sans Pro", sans-serif;
}

<div class="other-area">
    <span>Other Amount</span>
    <input type="number" name="otherAmount" value="$" class="other-input" />
</div>

Answer 1

您可以使用focus的{{1}}和blur事件来更改.other-input的样式。

.other-area

window.onload = function() {
  var div = document.getElementsByClassName('other-area')[0];
  var input = document.getElementsByClassName('other-input')[0];
  
  input.addEventListener('focus', function() {
    div.style.background = '#cd1e41';
    div.style.color = '#FFF';
  });
  
  input.addEventListener('blur', function() {
    div.style.background = '#cccbc9';
    div.style.color = '#000';
  });
}

.other-area {
    width: 100%;
    height: 3.5rem;
    margin-top: 1.2rem;
    margin-bottom: 1.6rem;
    background-color: #cccbc9;
    border-radius: 4px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    padding-left: .9rem;
}

.other-input {
    border-top-right-radius: .4rem;
    border-bottom-right-radius: .4rem;
    height: 3.3rem;
    width: 19.3rem;
    margin-top: .1rem;
    margin-left: .9rem;
    padding-left: .5rem;
    color: #cccbc9;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: "Source Sans Pro", sans-serif;
}

单击输入字段时更改div背景颜色

1 个答案: