For my current project, I need to incorporate a design feature where a "fade to black" mask gradually appears on the left side of an input field once the text content reaches the maximum visible width of the input box.
The image below provides a visual representation of what I'm aiming to achieve: https://example.com/image.png
I have already started implementing this feature with the following code snippet:
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://example.com/jquery.min.js"></script>
<div class="myInput">
<input id="input" placeholder="Search" />
</div>Now, my challenge is to make this mask appear conditionally (without hardcoding the 12-character limit and input width) and to develop a responsive solution that will be compatible with varying widths and text sizes.
Any suggestions or ideas on how to approach this?