Is it possible for the span tag acting as a placeholder to move up when the user clicks on the input form?
Currently, this functionality works if I click on the right side of the form but not when I click on the text.
Is it possible for the span tag acting as a placeholder to move up when the user clicks on the input form?
Currently, this functionality works if I click on the right side of the form but not when I click on the text.
Implement an onclick JavaScript event to switch the focus to the input element:
document.getElementById("your_input").focus()Ensure that you assign an id to both your input field and the span.
document.getElementById("placeholder").addEventListener("click", function() {
document.getElementById("mail").focus();
});* {
font-family: rubik;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
}
.content {
/* background-color: antiquewhite; */
/* padding: ; */
display: flex;
flex-direction: column;
gap: 50px;
width: 50vw;
/* height: 50vh; */
}
.insaan {
width: 35vw;
/* height: 50vh; */
}
h1 {
font-size: 50px;
color: #444;
margin-bottom: 50px;
}
.input-mail {
background-color: transparent;
height: 30px;
width: 500px;
position: relative;
border: none;
border-bottom: 2px solid #222;
outline: none;
}
/* .input-mail::placeholder {
font-size: 25px;
} */
.inputbox {
position: relative;
width: 300px;
height: 50px;
/* margin-left: 10px; */
margin-bottom: 50px;
}
span {
position: absolute;
top: 0;
left: 0;
font-size: 35px;
}
.inputbox input {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 40px;
border: none;
border-bottom: 2px solid #333;
outline: none;
background: none;
/* padding: 10px; */
/* border-radius: 10px; */
font-size: 1.2em;
}
.inputbox span {
color: #777;
padding-bottom: 15px;
position: absolute;
top: 10px;
left: 5px;
font-size: 25px;
transition: 0.6s;
font-family: sans-serif;
}
.inputbox input:focus ~ span {
transform: translateY(-55px);
/* color: #222;
font-size: 35px; */
padding-bottom: 40px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&family=Rubik:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script
type="module"
src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="48212726212b27262b087d667d667a">[email protected]</a>/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="127b7d7c7b717d7c6152273c273c20">[email protected]</a>/dist/ionicons/ionicons.js"
></script>
<script
src="https://kit.fontawesome.com/03d58ba9c7.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<div class="content">
<h1>Create your Account</h1>
<form action="">
<div class="inputbox">
<input type="text" id="mail" class="input-mail" />
<span id="placeholder">Enter your Email</span>
</div>
</form>
</div>
<img src="insaan.png" alt="" class="insaan" />
</div>
</body>
</html>Discovered from searching for "JS Change Focus":
https://www.geeksforgeeks.org/javascript-focus/My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...
I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...
I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...
Looking to implement a content panel switcher with 6 navigation items split between 2 rows, each containing 3 items. I want all columns to be evenly aligned to the left without excessive use of divs and clutter in the HTML code. Any suggestions on achiev ...
Searching for an answer to display only one div with a rate of 1/100. Currently, I am utilizing the following JavaScript: var random = Math.floor(Math.random() * $('.item').length); $('.item').hide().eq(random).show(); This method wor ...
I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...
Is it feasible to use Ajax for posting a form containing text and images through an HTML form, and receiving the response back via Ajax? Steps 1.) Include the form in HTML with a submit button. 2.) Submit the form to PHP, where it will process and upload ...
My recent project involved creating a web scraping code to extract information from a local news website. However, I have encountered two issues with the current code. One problem is that when the code retrieves paragraph data and saves it to a CSV file ...
I've been attempting to dynamically show and hide HTML elements based on the result of a service call. I have tried using *ngIf="messageService.getData() | async", but it doesn't seem to be working as expected. With the async, the "Failure Messag ...
I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but ...
As part of my project, I am developing a unique dynamic template tool that can seamlessly integrate with any templating framework such as pugs and jinja. The goal is to create a demo that resembles the following structure: view! { div { p { ...
A Brief Overview... Take a look at the HTML structure below: <div class="wrapper"> <div class="item above"></div> <div class="item active"></div> <div class="item below"></div> <div class="item ...
I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...
After taking a look at my React application in Chrome Developer Tools, I noticed that the Sources tab reveals a folder called static/js where the entire code of my project is visible. This discovery raised some red flags regarding security. To address thi ...
Can anyone assist with an issue I am encountering on my website? When viewed in IE 11, the text on some headings and paragraphs flashes between Times New Roman and the specified font-face type before settling on the correct font. This all happens in less t ...
If the login credentials are correct, I will be directed to the member page. If not, I should remain on the same page. I am struggling with how to create a link to another page. I have come across some suggestions involving headers, but I am still unsure o ...
I'm currently encountering issues with running this code in IE version 6. While it performs as expected in IE 7, IE 8, FireFox, and Google Chrome, I face a problem where the message at the bottom of the SurroundingWrapper div does not stay fixed to th ...
How can I ensure that this logo remains fixed at the center top of the page, without moving as the browser size changes? I want the logo to maintain its position and not recenter itself when the browser is resized. Below is my current CSS CSS #logo { p ...
In this scenario, the border is not surrounding the blue box but rather extends over the entire window height. Is there any advice on how to create a border around the blue box? Important Points: The HTML and body definitions cannot be altered. The pad ...
Just diving into the world of PHP development and I have an application with a home.php page where users are required to enter a security code before submitting. If the entered security code is correct, I want two divisions (with div ids window and securit ...