Javascript 如何有条件地添加；“褪色为黑色”；屏蔽输入字段？

我正在实现一种设计，当文本内容达到输入框的最大可见宽度时，“淡入黑色”遮罩将出现在输入框的左侧

下图更好地说明了我要完成的工作：

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

var input=document.querySelector（'#input'）；
var container=document.querySelector（'.myInput'）；
input.addEventListener（'keydown'，函数（e）{
如果（input.value.length>12）{
container.classList.add（'flated'）；
}否则{
container.classList.remove（'flated'）；
}
});
正文{
背景：#000；
}
.myInput{
位置：相对位置；
}
.myInput输入{
字体系列：“Trim”、“NOW G”、“Oscine”；
字体风格：普通；
字号：500；
字号：28px；
背景：#000；
填充：12px；
颜色：#fff；
框大小：边框框；
利润率：0.10px；
边框：1px实心#ccc；
宽度：200px；
}
在…之前{
显示：块；
背景图像：-webkit线性渐变（左，黑色，rgba（0,0,0,0））；
宽度：20px；
位置：绝对位置；
内容：“；
左：15px；
顶部：1px；
底部：1px；
}
您可以找到
输入是否溢出为

（input.offsetWidth

另外，我建议听
input
事件而不是
keydown
来捕捉
paste

请参见下面的代码段：


document.addEventListener（'input'，函数（e）{
if（e.target.nodeName.toLowerCase（）='input'）{
var输入=e.目标；
var container=input.parentNode；
if（input.offsetWidth
正文{
背景：#000；
}
.myInput{
位置：相对位置；
保证金：1rem；
}
.myInput输入{
字体：普通500 28px“修剪”、“现在为G”、“Oscine”；
背景：#000；
填充：12px；
颜色：#fff；
框大小：边框框；
利润率：0.10px；
边框：1px实心#ccc；
宽度：200px；
}
.褪色的.阴影{
位置：绝对位置；
顶部：1px；
底部：1px；
宽度：20px；
背景图像：线性梯度（90度，#000，rgba（0,0,0,0））；
}
#输入2{
左缘：20%；
左：3em；
}

不确定这是否是一个精确的复制品，但这可能会有所帮助：。它将输入的文本放入占位符元素，获取宽度，并将其与输入进行比较，以确定文本是否溢出。有趣的方法@TylerRoper，我将尝试一下！非常好，感谢您的回复和“输入”活动提示。然而，我仍然无法使它与不同的输入填充值一起工作（考虑到我事先不知道输入css是什么）@guilhermelmi，你的问题没有提到任何
填充
问题。。。但我已经解决了这个问题。请参阅我的最新答案。@guilhermelmi，很乐意提供帮助。