如何在输入字段中有条件地添加“淡入黑色”蒙版？

document.addEventListener('input', function(e) {
  if (e.target.nodeName.toLowerCase() === 'input') {
    var input = e.target;
    var container = input.parentNode;
    if (input.offsetWidth < input.scrollWidth) {
      if (!container.classList.contains('faded')) {
        container.classList.add('faded');
        var cs = getComputedStyle(input);
        container.querySelector('.shadow').style.left = [
          'border-left-width', 'margin-left', 'padding-left'
        ].reduce(function(a, e) {
          return a += parseInt(cs[e])
        }, 0) + 'px';
      }
    } else {
      container.classList.remove('faded');
    }
  }
});

body {
  background: #000;
}

.myInput {
  position: relative;
  margin:1rem;
}

.myInput input {
  font: normal 500 28px "Trim", "NOW G", "Oscine";
  background: #000;
  padding: 12px;
  color: #fff;
  box-sizing: border-box;
  margin: 0 0 0 10px;
  border: 1px solid #ccc;
  width: 200px;
}

.faded .shadow {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 20px;
  background-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0));
}

#input2 {
  margin-left: 20%;
  padding-left: 3em;
}

<div class="myInput">
  <input id="input" placeholder="Search" />
  <span class="shadow"></span>
</div>


<div class="myInput">
  <input id="input2" placeholder="Search" />
  <span class="shadow"></span>
</div>