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

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>

我现在的问题是如何有条件地添加此掩码（即删除硬编码的12个字符长度和输入硬编码的宽度），以及如何创建一个适用于所有宽度和所有文本大小的负责任的解决方案。 / p>

有什么想法吗？

Answer 1

您可以找到input是否溢出

(input.offsetWidth < input.scrollWidth)

我也建议您听input事件而不是keydown来捕捉paste。

请参见下面的代码段

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>