Dear Community
as you can see in the picture, the text “Your email address” appears above the entered email. I would like to remove this text when entering the email. How can I do that?
IMPORTANT: The text should only disappear when I enter the email. If I do not click on the field, the text should remain.
To achieve the desired behavior where the “Your email address” text disappears only when the user enters the email address, you can use JavaScript. Here’s an example of how you can implement it:
HTML:
function handleInput() {
var input = document.getElementById("emailInput");
if (input.value.trim() !== "") {
input.placeholder = "";
} else {
input.placeholder = "Your email address";
}
}
In this example, we’re using the oninput event handler to call the handleInput() function whenever there is a change in the input field. The function checks if the input value is not empty after trimming any leading or trailing whitespace. If it’s not empty, it sets the placeholder attribute of the input field to an empty string, effectively removing the placeholder text. Otherwise, it sets the placeholder attribute back to “Your email address”.
@NomtechSolution Where can I put this in?
Hi @admintb
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
The text will be disappeared once you enter any letters to the input
Hope this can help you solve the issue
Best regards,
Noah | PageFly
@PageFly-Noah Nothing happened…
I have checked on your page source and cannot see the code, can you add it and take screenshot where you added?
It works like this when i add on my side
The text should disappear as soon as you enter anything to the field
Hi @admintb
You can add this extra code for that floating label
Below remove replace the code you added with this code.
Hope this can help