Falsches Verhalten des benutzerdefinierten Platzhalters ⇐ CSS

[Guest]

Ich habe die folgende React-Komponente

Code: Select all

import { useRef } from "react";
import classes from "./styles/Input.module.css";

function Input({
children,
inputID = "default",
iconSrc = "icons/person.svg",
hasIcon = false,
inputType = "text",
}) {
const input = useRef(null);
const placeholder = useRef(null);

function animatedPlaceholder(event) {
console.log(event);
if (document.activeElement === input.current || event.target.value !== "") {
placeholder.current.classList.add(classes["input-text-placeholder-up"]);
return;
}
placeholder.current.classList.remove(classes["input-text-placeholder-up"]);
}

return (

className={classes["input-text-container"]}
>
{hasIcon ? (
[img]{iconSrc} onClick={() =[/img]
 input.current.focus()} />
) : (
""
)}

 {input.current.focus();}}
>
{children}



);
}

export default Input;
< /code>
Und dies sind die Stile für diese Komponente < /p>
:root {
--icon-padding: 60px;
--icon-size: 28px;
}

.input-text-container {
position: relative;
width: 100%;
cursor: text;
}

.input-text-container:focus {
outline: 1px solid #0053A4;
}

.input-text {
box-sizing: border-box;
font-family: Roboto-Regular;
font-size: 18px;
border: 2px solid #0053A4;
border-radius: 6px;
padding-left: 12px;
padding-right: 12px;
padding-top: 17px;
padding-bottom: 17px;
width: 100%;
z-index: 1;
}

.input-text-placeholder {
box-sizing: border-box;
position: absolute;
top: 0;
left: 12px;
transform: translateY(-50%);
font-size: 18px;
color: rgb(110, 110, 110);
top: 50%;
z-index: 1;
transition: top .15s, font-size .15s;
user-select: none;
}

.input-text-placeholder-up {
font-size: 12px;
top: 20%;
}

.input-text:focus {
outline: 1px solid #0053A4;
}

.with-icon {
padding-left: var(--icon-padding);
}

.placeholder-with-icon {
left: var(--icon-padding);
}

.input-text-icon {
position: absolute;
top: 50%;
left: calc((var(--icon-padding) - var(--icon-size)) / 2);
width: var(--icon-size);
height: var(--icon-size);
transform: translateY(-50%);
z-index: 1;
}

.input-text-label {
display: block;
user-select: none;
margin-bottom: 8px;
}

Das Problem ist, dass, wenn das Div -Element, das als Platzhalter fungiert, angehoben wird (d. H. Die Eingabe-Text-Platzhalter-up -Klasse, angehängt ist IT), wenn Sie darauf klicken, fällt es wieder nach unten, anstatt so an Ort und Stelle zu bleiben, wie es sollte. Wie ich verstehe, ist das Problem, dass das Onblur -Ereignis des Eingabe Element an erster Stelle steht, und gemäß allen Bedingungen des AnimationsPlace -Dehder -Funktion sollte der Platzhalter gesenkt werden und entsprechend entsprechend Es wird gesenkt und das Klick darauf hat keine Zeit zum Übergeben, da es seine Position geändert hat. Was tun in einem solchen Fall? Wie kann ich die Eingabe-Text-Platzhalter Klasse verlassen, wenn ich auf einen Platzhalter klicke, der diese Klasse bereits hat?