Javascript 当文本延伸到输入字体上时，输入字体上的渐变透明度

我面临着一个问题：我正在用不同的状态创建一些输入；其中一种状态是输入的文本比输入本身长：在这种情况下，隐藏在输入左侧的文本应以渐变透明度淡出：

我现在的代码是：

.Input{
位置：相对位置；
宽度：100%；
边界：无；
宽度：200px；
}
.输入：在{
内容：''；
位置：绝对位置；
底部：0；
宽度：100%；
过渡：边框底部0.5s宽；
边框底部：1px实心gainsboro；
}
.输入{
边缘顶部：20px；
高度：40px；
宽度：100%；
左侧填充：0；
字体大小：16px；
字体大小：300；
背景色：透明；
背景图像：线性梯度（至底部，gainsboro 50%，番茄50%）；
背景重复：无重复；
背景大小：0.11%；
背景位置：50%100%；
过渡：所有0.5s缓解；
盒影：无；
}
.输入h1{
字体大小：16px；
颜色：gainsboro；
字体大小：400；
位置：绝对位置；
指针事件：无；
左：0；
底部：0；
过渡：0.5s缓解所有；
宽度：100%；
行高：未设置；
}
。输入：悬停：在{
过渡：边框底部0.5s宽；
边框底部：1px实心灰色；
}
输入：焦点{
背景色：透明；
背景图像：线性渐变（至底部，透明50%，番茄50%）；
背景重复：无重复；
背景大小：100%11%；
背景位置：50%100%；
过渡：所有0.5s缓解；
}
投入：聚焦，
输入：非（：焦点）：有效{
边界：无；
大纲：无；
}
输入：焦点~h1，输入：非（：焦点）：有效~h1{
颜色：番茄；
过渡：所有0.5s缓解；
转换：translateY（-25px）；
}

我的输入

检查文本是否达到特定长度的想法，如果是，则显示隐藏元素

在下面的示例中，我简化了测试，但您需要做的是计算文本应采用的宽度，然后与输入宽度进行比较。您可以查看此链接以了解一些想法

$（'.Input-Input'）。打开（'keypress change keyup'，function（）{
如果（$（this.val（）.length>10）{
$（this.parent（）.find（'.grad'）.css（'opacity'，'1'）；
}否则{
$（this.parent（）.find（'.grad'）.css（'opacity'，'0'）；
}
})
$（'.Input.grad'）。单击（函数（）{
$（this.parent（）.find（'input'）.focus（）；
})

.Input{
位置：相对位置；
宽度：100%；
边界：无；
宽度：200px；
}
格拉德先生{
位置：绝对位置；
光标：文本；
顶部：25px；
底部：2px；
左：0；
右：90%；
不透明度：0；
过渡：0.5s；
z指数：1；
背景图像：线性渐变（向右，rgba（255，255，255，0.8），透明）；
}
.输入：在{
内容：''；
位置：绝对位置；
底部：0；
宽度：100%；
过渡：边框底部0.5s宽；
边框底部：1px实心gainsboro；
}
.输入{
边缘顶部：20px；
高度：40px；
宽度：100%；
左侧填充：0；
字体大小：16px；
字体大小：300；
背景色：透明；
背景图像：线性梯度（至底部，gainsboro 50%，番茄50%）；
背景重复：无重复；
背景大小：0.11%；
背景位置：50%100%；
过渡：所有0.5s缓解；
盒影：无；
}
.输入h1{
字体大小：16px；
颜色：gainsboro；
字体大小：400；
位置：绝对位置；
指针事件：无；
左：0；
底部：0；
过渡：0.5s缓解所有；
宽度：100%；
行高：未设置；
}
。输入：悬停：在{
过渡：边框底部0.5s宽；
边框底部：1px实心灰色；
}
输入：焦点{
背景色：透明；
背景图像：线性渐变（至底部，透明50%，番茄50%）；
背景重复：无重复；
背景大小：100%11%；
背景位置：50%100%；
过渡：所有0.5s缓解；
}
投入：聚焦，
输入：非（：焦点）：有效{
边界：无；
大纲：无；
}
输入：focus~h1，
输入：非（：焦点）：有效~h1{
颜色：番茄；
过渡：所有0.5s缓解；
转换：translateY（-25px）；
}

我的输入

当然，我们需要一些JS，我想你应该计算文本的高度，这将涉及字体大小、字体系列等。我不知道我为什么要计算高度；我需要的是对文本应用渐变透明度，其宽度是固定的，因此不需要

parseInt（window.getComputedStyle（$（'input'）[0]）.width，10）。但是你说过当文本变长时你想要这个渐变？因为渐变很容易，当文本比宽度长时，它需要像图像中那样的渐变…这很有趣…但是你要做的是在输入上设置一个白色层；而且，如果您的输入是一个组件，您不想设置颜色或该层，但文本的透明度如何？@NikitaSöze该层的颜色可以更改为白色，也可以更改为透明的颜色。。。但是我不确定我们是否可以只改变文本的一部分的透明度，这就是为什么我在文本上选择了一个图层来控制我要使哪个部分褪色。我们完全可以控制它，使它看起来像是透明的；）我已经更新了您可以检查的图层，如果我使用的是图层，我会将h1设置为
z-index:1
，以避免图层与标题重叠；但我想要的是设置文本的颜色（透明），因为我设置的是一个组件，它需要可重用。@NikitaSöze是的，我的第一个测试是什么，我没有注意到所有内容，但我们可以简单地更改层的位置，使其仅位于文本上方（如您现在所见），然后，如果你把它放在文本上方，你就不能再点击它进行编辑了…