I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.
Lets say if I am filling First Name:
Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.
Below is the related code to it:
Form-rise-click here for fiddle
HTML:
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool"/>
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool"/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool"/>
</div>
</div>
CSS:
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
jQuery:
$('input').on('focusin', function() {
$(this).parent().find('label').addClass('active');
});
$('input').on('focusout', function() {
if (!this.value) {
$(this).parent().find('label').removeClass('active');
}
});
I have just used keyup() of jquery. It is basically an event handler to the keyup of javascript event.
$('input').keyup(function(){
$(this).parent().find('label').text($(this).val())
});
Please check in the JSFiddle for any doubts.
Here is a small suggestion for a better UX.
When the input value is empty you can give a small if condition to show its former placeholder. And we can mange that placeholder with the help of an attribute. for e.g here i'm using name to retrieve the placeholder.
Please check in the JSFiddle for any doubts.
Hope this is helpful. Thank you.
Yes, it is possible. Use the following jQuery code as an example for the rest of your inputs.
$("#fname").keyup(function() {
$("label[for='fname']").html($(this).val());
});
Description: You select the ID input (e.g. #fname) for which you want to change the value of the label that moves to top (e.g. label fname) to the value that you are currently typing.
Check the updated JSFiddle here: https://jsfiddle.net/NikolaosG/tyowcgut/3/
Yes, the keyup event is the best way to handle this. But additionally, you use multiple event handlers for each input -- here's an alternate way to handle that scenario. Not that one is better or preferred, simply an option.
$('input').on({
focusin: function() {
$(this).parent().find('label').addClass('active');
},
focusout: function() {
if (!this.value) {
$(this).parent().find('label')
.removeClass('active');
}
},
keyup: function() {
var newText = $(this).val();
$(this).parent().find('label').text(newText);
}
});
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool" />
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool" />
</div>
</div>
Related
I have the following code:
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xr123gjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
I would like a text animation on the input fields. For example, I would like my expected output to be like this:
https://watch.screencastify.com/v/3mlMie2rx0UzhdymHYCR
As you can see, I would like the text such as "First Name" to be inside the input field, and when the user clicks the input field, the text should animate and be at the top. How can I achieve this task? Any suggestions?
There are a lot of variants how to do that, one of them is to use extra-div for input & label, and role of floating text will be played by label:
.wrapper {
padding: 20px;
}
.input-data {
height: 40px;
width: 100%;
position: relative;
}
.input-data input {
height: 100%;
width: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid silver;
transition: border-color .4s;
outline: none;
}
.input-data input:focus~label,
.input-data input:valid~label {
transform: translateY(-20px);
font-size: 13px;
color: #4158d0;
}
.input-data label {
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
.input-data input:focus,
.input-data input:valid {
border-color: #4158d0;
}
<div class="wrapper">
<div class="input-data">
<input type="text" required>
<label>Name</label>
</div>
</div>
I tried to create a Beta for you, using the video you linked as a reference
using HTML and CSS only...
the trick here is creating an Extra Div as a Parent, so we can put the label and input inside.
now set the parent to have a position: relative; so the label will be absolute
now successfully we can use TOP, LEFT, RIGHT, BOTTOM and that's it (position the label as the place-holder)
the logic
I put the logic here .input-container input:focus~label
make sure that the label is after the input in HTML, and inside the parent
delete the border on focus
remember that the input if focused it will have like a border automatically...
to delete this border use outline: none; because that border CAN'T be deleted with border: none;
that's it, test the code I write for you! and I hope this will helps
here the code
* {
--input-height: 3rem;
--light-black: rgba(0, 0, 0, 0.3);
--medium-black: rgba(0, 0, 0, 0.6);
}
section {
height: 100vh;
width: 100vw;
display: grid;
place-content: center;
}
.input-container input {
height: var(--input-height);
width: 80vw;
font-size: 2rem;
border: none;
border-bottom: 2px solid var(--light-black);
}
.input-container {
position: relative;
display: grid;
place-items: center start;
}
.input-container label {
position: absolute;
left: 1rem;
font-size: 1.5rem;
color: var(--medium-black);
transition-duration: 0.5s;
}
.input-container input:focus~label {
position: absolute;
font-size: 1rem;
top: -1rem;
left: 0;
transition-duration: 0.2s;
z-index: 2;
}
.input-container input:focus {
outline: none;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form action="">
<div class="input-container">
<input type="text" name="" id="my-input">
<label for="my-input">name</label>
</div>
</form>
</section>
</body>
</html>
Somehow when I try to use JS to show hidden content (the login formular when clicking the login-button) my formular gets deformed. Espescially the "register" Button is too long and I can't locate my problem properly.
When I'm deleting the JS and the display:none attribute in #login-fenster it shows up as I wanted to. I've tried to copy the neccessary code to JSfiddle, I hope it worked. Until now I havn't any clue about responsive design so you have to max the output window i think. sorry for that!
I have deleted diverse parts of the code and tried to locate the problem but only found a connection to JS
https://jsfiddle.net/vz2jfmkc/1/
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
body, main{
background-color: #000000;
overflow-x: hidden;
}
nav {
background: #0d0d0d;
width: 100vw;
top: 0;
}
.nav {
display: flex;
justify-content: flex-end;
list-style: none;
height: 3vw;
text-align: center;
align-items: center;
padding: 0 2vw 0 0;
}
nav ul {
padding: 0px;
margin: 0;
right: 0;
}
nav ul li a {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.2rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
nav ul li a:hover {
color: #ffffff;
text-decoration: none;
font-weight: 100;
background: linear-gradient(#262626, #595959);
}
nav button {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.1rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
#login {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
#login:active {
transform: scale(0.9);
}
.news {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.news:active {
transform: scale(0.9);
}
.tests {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.tests:active {
transform: scale(0.9);
}
.community {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.community:active {
transform: scale(0.9);
}
.index {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.index:hover {
transform: scale(0.9);
}
.search {
margin-right: 1rem;
}
#login-fenster {
right: 0;
margin-top: 0rem;
margin-right: 19rem;
z-index: 100;
justify-content: center;
align-content: center;
align-items: center;
display: inline-flex;
flex-direction: column;
height: 30vh;
width: 18vw;
background-color: black;
color: white;
position: absolute;
border: 3px solid white;
border-radius: 20px 20px;
}
.login-form {
margin-top: 10px;
}
#login-fenster input[type="text"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
#login-fenster input[type="password"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
.register {
margin-top: 10px;
background: #262626;
border: 1px solid white;
border-radius: 15px 15px;
transition: transform all 0.2s;
}
.register a {
text-decoration: none;
color: white;
font-size: 1.3rem;
transition: transform all 0.2s;
}
.register:active {
transform: scale(0.95);
}
button {
cursor: pointer;
color: white;
background-color: #262626;
padding: 0.5rem;
border-radius: 15px 15px;
border: 1px solid white;
font-size: 1rem;
transition: transform 0.2s;
}
button:active {
transform: scale(0.95);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Koop_bude</title>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" />
</head>
<header>
<nav>
<ul class="nav">
<button id="login" onclick="myFunction()">Login</button>
<li class="news">News</li>
<li class="tests">Tests</li>
<li class="community">Community</li>
<li class="search"><input type="search" placeholder="Suche..." /></li>
</ul>
</nav>
<div id="login-fenster" style="display:none;">
<input class="login-form" type="text" placeholder="Username" name="username" required />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
<button class="login-form" type="submit">Login</button>
<label>
<input class="login-form" type="checkbox" checked="checked" name="remember">Eingeloggt bleiben
</label>
<div id="forgot-password">
<button class="forgot-password-button">Passwort vergessen?</button>
</div>
<div class="register">Registrieren
</div>
</div>
</header>
<body>
<script>
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
I want the content to show up on a line under the login button. I gave that content specific parameters which looked good to me for a newbie and I don't want JS to deform it.
Thanks for that JSFiddle - though I'm still a little confused about what you're hoping to accomplish. From what I understand, your issue is more of a CSS issue than a JavaScript issue. If your issue is that the white border cuts through your content:
then removing
#login-fenster {
...etc...
height: 30vh; <----- Remove this to keep everything inside regarding Y-Axis
width: 18vw; <----- Remove this to keep everything inside regarding X-Axis
...etc...
}
and now all of your items will always be inside your white border
If you want the different input fields to be on different lines, just add a <br /> tag between your inputs:
<input class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
On the other hand, if you really want the boxes to grow/shrink, and you want to leave width: 18vw; (I still highly recommend you get rid of the height: 30vh;... that's not helping you at all) then just set the width attributes to be 100% of the parent-div (the white box).
<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />
Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.
I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Thanks for your help in advance!
Cheers
Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:
$(".js-form-item").on("click", function () {
$(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
if($(this).val() === '') {
$(this).parent('.js-form-item').removeClass('form-item--input-filled');
}
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.
In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.
https://api.jquery.com/blur/
Use .blur() and it will solve your issue.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
But in my opinion you should use .focus() rather than your .click() function
$(".js-form-item > input").on("focus", function() {
$(this).parent().addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Hope this solved your issue.
Your code is ok, only change it similar this. It will works stylish!. simple and short:
$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
function(){
$(this).removeClass('form-item--input-filled');
}
);
Extra descriptions:
I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.
This question already has answers here:
Add and remove a class on click using jQuery?
(8 answers)
Closed 4 years ago.
I am trying to add the toggleClass but it's not working. i also tried to add or remove the class using the hasClass. there is also same problem.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
You .box is sitting on top of your button, so the function is never getting called. Even the though your box opacity is 0, it's still 'there', and it's what you're clicking (note the cursor is not a pointer when hovering over the button).
You'll either want to find a different position for your .box, or place it's z-index lower than 0. I've made the latter change in the snippet below.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
z-index: -1;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
To achieve expected reult, use below option of z-index , as input and button are overlapped
.srch-btn{
position:relative;
z-index:9999
}
https://codepen.io/nagasai/pen/EQqYJL
remove position: absolute from .box class.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
It was because your button was underneath the text input field. Giving the button a value of 'relative' to the 'position' property and the setting its 'z-index' slightly higher than the text field will make the button clickable. Adding a transition would make the animation go fluid.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
var widthbtn=$(".srch-inpt").width();
$("button").css({"margin-left":widthbtn+"px","transition":"all 0.1s ease"});
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
cursor: pointer;
}
.srch-inpt.expanded {
width: initial;
opacity: 1;
}
button {
cursor: pointer;
position: relative;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
Fiddle And Code:
$(document).ready(function(){
$("input").focus(function(){
$(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function(){
if(!$('input').val()) {
$(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.
Expected Result:
On click, the fake placeholder will go up (only the clicked one)
The fake placeholder will stay up, if the input box has some value.
Use $(this).next(".fakeplaceholder").
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$('input').val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
It will target the next element with the class fakeplaceholder right after the input you focus
$(document).ready(function() {
$("input").focus(function() {
$(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
if (!$(this).val()) {
$(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color: #ffffff;
padding: 15px 120px 50px 50px;
}
:focus {
outline: none;
}
.input1div {
display: inline-block;
position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif;
color: #333;
width: 100%;
box-sizing: border-box;
letter-spacing: 1px;
}
.input1div input {
border: 0;
padding: 7px 0;
border-bottom: 1px solid #ccc;
}
.input1div input~.focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #3399FF;
transition: 0.4s;
}
.input1div input:focus~.focus-border {
width: 100%;
transition: 0.4s;
}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color: #8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
$(document).ready(function(){
$("input").focus(function(){
$(this).next().addClass("fakeplaceholdertop");
});
$("input").change(function(){
if($(this).val()==""){
$(this).next().removeClass("fakeplaceholdertop");
}else{
$(this).next().addClass("fakeplaceholdertop");
}
});
});
.accountbox {
background-color:#ffffff;
padding: 15px 120px 50px 50px;
}
:focus{outline: none;}
.input1div {
display:inline-block; position: relative;
}
.input1div input {
font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;
}
.input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}
.input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;}
.fakeplaceholder {
position: absolute;
pointer-events: none;
top: 10px;
color:#8c8c8c;
transition: 0.28s ease all;
}
.fakeplaceholdertop {
top: -10px;
font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountbox">
<p style="font-size:25px;font-weight:600;">Sign Up</p>
<form class="accountform">
<div class="input1div">
<input class="firstname" type="text" name="firstname" />
<span class="fakeplaceholder">First Name</span>
<span class="focus-border"></span>
</div>
<br/><br/><br/>
<div class="input1div">
<input type="text" name="lastname" />
<span class="fakeplaceholder">Last Name</span>
<span class="focus-border"></span>
</div>
</form>
</div>
You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this
$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");
$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");
You just have to add separate ID's to access the different fields.
<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>
Then apply the fakeplaceholdertop class to the specific element.
$(".firstname").focus(function() {
$("#first").addClass("fakeplaceholdertop");
});
$(".lastname").focus(function() {
$("#last").addClass("fakeplaceholdertop");
});