استایل دهی به اینپوت از طریق جاوا اسکریپت

سلام ببخشید من یک اینپوت طراحی کردم که یک نوشته داخلش دارد و وقتی روی اینپوت فوکس میشود نوشته بالا میرود تا جا برای نوشتن متن باشد. برای بالا بردن متن مشکلی ندارم اونا با css درست کردم ولی وقتی نوشتن داخل اینپوت تمام میشود و اینپوت از حالت فوکس خارج میشود نوشته ای که رفته بود بالا میاد پایین و روی متن را میگیرد و متن درست مشخص نیس. سوال من اینه که چجوری با جاوا اسکریپت میشود گفت که وقتی این اینپوت پر است یا داخلش متن یا چیزی است به اون نوشته کلاسی داده شود تا بالا بماند. من کلاس دادن با جاوا اسکریپت را بلدم فقط نمیدونم چجوری بگم وقتی پر است این اتفاق بی افتد.

کد های html

<div class="input-field">
    <input type="text" class="input-field-input">
    <label class="input-field-text">
</div>

کد های css

.input-field {
    height: 50px;
    position: relative;
}
.input-field-input {
    font-size: 100%;
    border: solid #777;
    border-width: 0 0 1px;
    padding: calc(1rem - 1px);
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    position: relative;
    z-index: 1;
    line-height: 1.3125;
    font-family: inherit;
    outline: none;
    background: none;
    transition: border-color 0.2s, color 0.2s;
}
.input-field-input:hover {
    border-color: #157ce1;
}
.input-field-input:focus {
    border-color: #157ce1;
}
.input-field-text {
    position: absolute;
    color: #777;
    top: 0.25rem;
    left: 1rem;
    right: auto;
    z-index: 2;
    transform: translate(0, 0);
    transform-origin: left center;
    pointer-events: none;
    margin-top: calc((54px - 1.5rem) / 2);
    user-select: none;
    transition: 0.3s all;
}
.input-field-input:hover ~ .input-field-text {
    color: #157ce1;
}
.input-field-input:focus ~ .input-field-text {
    color: #157ce1;
    transform: translate(0, -170%);
    font-size: 0.9rem;
}

طرح نهایی