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

Question

我正在实施一种设计，一旦文本内容达到输入框的最大可见宽度，预计“淡入黑”蒙版将出现在输入的左侧。

下面的图像更好地说明了我想要完成的内容：

我已经实现了其中的一部分，代码如下：

var input = document.querySelector('#input');

var container = document.querySelector('.myInput');

input.addEventListener('keydown', function(e) {

  if (input.value.length > 12) {

    container.classList.add('faded');

  } else {

    container.classList.remove('faded');

  }

});

body {

  background: #000;

}

.myInput {

  position: relative;

}

.myInput input {

  font-family: "Trim", "NOW G", "Oscine";

  font-style: normal;

  font-weight: 500;

  font-size: 28px;

  background: #000;

  padding: 12px;

  color: #fff;

  box-sizing: border-box;

  margin: 0 0 0 10px;

  border: 1px solid #ccc;

  width: 200px;

}

.faded::before {

  display: block;

  background-image: -webkit-linear-gradient(left, black, rgba(0, 0, 0, 0));

  width: 20px;

  position: absolute;

  content: "";

  left: 15px;

  top: 1px;

  bottom: 1px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myInput">

  <input id="input" placeholder="Search" />

</div>