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

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>