Home Web Development CSS Moving Input Focus Effect With jQuery | Inputs in Signup Form

CSS Moving Input Focus Effect With jQuery | Inputs in Signup Form

December 12, 2019

2707

How we can create a moving focus effect for inputs using HTML CSS JS? Solution: See this CSS Moving Input Focus Effect With jQuery, Inputs in Signup Form.

Previously I have shared Input and Placeholder effects, but this is only about focus which has a dynamic moving effect. Basically, there is a separate selector for selecting elements that have focus. The selector is :focus selector, which allowed on elements that accept keyboard events or other user inputs. We can focus on input by click on them or using the TAB button.

Today you will learn to create a dynamic focus on inputs in a signup form. Basically, there is a signup or registration form which has basic input fields like name, email, zip, etc. And whole form section has a rounded rectangle-shaped border and a signup button at the bottom. The main feature of this program is focus effect, it has a border-line focus effect that moves when we focus on another input.

So, Today I am sharing CSS Moving Input Focus Effect With jQuery. Basically this program is equally based on CSS and jQuery, CSS is for styling the elements and jQuery is applied those style according to action. jQuery is a JS library, that’s why I am putting this post in the JavaScript category. You can use this signup form on your website because it is complete: it has a responsive design, focus effect, and cool UI.

If you are thinking now how this moving focus effect actually is, then see the preview given below.

Preview Of Dynamic Focus Inputs in Signup Form

See this video preview to getting an idea of how this focus effect looks like.

https://webdevtrick.com/wp-content/uploads/moving-input-focus.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.

CSS Moving Input Focus Effect With jQuery Source Code

Before sharing source code, let’s talk about it. First I have created the form using HTML <form> tag and placed a span for focus effect, a heading, and inputs for fields inside the form. I have turned off autocomplete on every input and placed placeholder in each text input. Inside some input I have put half value for placing 2 inputs in a line.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I gave size, position, style, etc to all the elements, to giving style to the inputs I have used input[type=text] in the CSS. And for selecting the submit button I have used input[type=submit] value in the CSS file.

jQuery here handling the moving focus effect in this program. In CSS file I gave style to the focus effect, and jQuery apply the style to the input according to user action. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Focus Effect | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Poppins:700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<form autocomplete="off">
  <span id="focus"></span>
  <h1>Fill Your Details</h1>
  <input type="text" half placeholder="First Name" autocomplete="no">
  <input type="text" half placeholder="Last Name" autocomplete="no">
  <input type="text" placeholder="Email" autocomplete="no">
  <input type="text" placeholder="Phone No." autocomplete="no">
  <input type="text" half placeholder="Zip Code" autocomplete="no">
  <input type="text" half placeholder="City" autocomplete="no">
  <input type="submit" value="Sign Up">
</form>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Focus Effect | Webdevtrick.com</title>

</head>

<body>

<h1>Fill Your Details</h1>

</form>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/*  Code By Webdevtrick ( https://webdevtrick.com )  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  border: 2px solid #ff3f3f;
  padding: 40px 10px 0px 40px;
  width: 70%;
  max-width: 700px;
  border-radius: 20px;
}

#focus {
  border: 3px solid #ff3f3f;
  box-shadow: 0 0 10px 0 #ff3f3f;
  position: absolute;
  transition: width .2s ease,  height .2s ease,  left .2s ease,  top .2s ease,  border-radius .2s ease;
  pointer-events: none;
  z-index: 5;
  border-radius: 10px;
  display: none;
}

h1 {
  margin-bottom: 30px;
  font-size: 2em;
  color: #212121;
}

input {
  padding: 10px 15px;
  border-radius: 10px;
  transition: .3s ease;
  color: #ff3f3f;
}
input[type=text] {
  width: calc(100% - 30px);
  margin-bottom: 30px;
  border: 2px solid #4d4d4d;
}
input[type=text]:placeholder-shown {
  border: 2px solid #4d4d4d;
}
input[type=text]::placeholder {
  color: #4d4d4d;
}
input[type=text][half] {
  width: calc(50% - 30px);
  float: left;
  margin-right: 30px;
}
input[type=submit] {
  background: #ff3f3f;
  color: #fff;
  border: 2px solid #ff3f3f;
  outline: 10px solid #fff;
  width: calc(50% - 30px);
  height: 60px;
  margin: 0 30px -30px 0;
  float: right;
  font-weight: 800;
  font-size: 1em;
  letter-spacing: 1.8pt;
  text-transform: uppercase;
  cursor: pointer;
}
input[type=submit]:hover {
  width: calc(100% - 30px);
}
input:focus {
  outline: 0;
}
@media (max-width:765px) {
  form {
    width: 95%;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

form {

border: 2px solid #ff3f3f;

padding: 40px 10px 0px 40px;

width: 70%;

max-width: 700px;

border-radius: 20px;

}

#focus {

border: 3px solid #ff3f3f;

box-shadow: 0 0 10px 0 #ff3f3f;

position: absolute;

transition: width .2s ease, height .2s ease, left .2s ease, top .2s ease, border-radius .2s ease;

pointer-events: none;

z-index: 5;

border-radius: 10px;

display: none;

}

h1 {

margin-bottom: 30px;

font-size: 2em;

color: #212121;

}

input {

padding: 10px 15px;

border-radius: 10px;

transition: .3s ease;

color: #ff3f3f;

}

input[type=text] {

width: calc(100% - 30px);

margin-bottom: 30px;

border: 2px solid #4d4d4d;

}

input[type=text]:placeholder-shown {

border: 2px solid #4d4d4d;

}

input[type=text]::placeholder {

color: #4d4d4d;

}

input[type=text][half] {

width: calc(50% - 30px);

float: left;

margin-right: 30px;

}

input[type=submit] {

background: #ff3f3f;

color: #fff;

border: 2px solid #ff3f3f;

outline: 10px solid #fff;

width: calc(50% - 30px);

height: 60px;

margin: 0 30px -30px 0;

float: right;

font-weight: 800;

font-size: 1em;

letter-spacing: 1.8pt;

text-transform: uppercase;

cursor: pointer;

}

input[type=submit]:hover {

width: calc(100% - 30px);

}

input:focus {

outline: 0;

}

@media (max-width:765px) {

form {

width: 95%;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

//  Code By Webdevtrick ( https://webdevtrick.com ) 
const FORM = $("form"); 
const TYPES = ["input[type=text]"]; 
const FOCUS = $("#focus"); 

function position(e) {
  var props = {
    top: e.offset().top,
    left: e.offset().left,
    width: e.outerWidth(),
    height: e.outerHeight(),
    radius: parseInt(e.css("border-radius"))
  };
  
  FOCUS.css({
    top: props.top,
    left: props.left,
    width: props.width,
    height: props.height,
    "border-radius": props.radius
  });
  
  FOCUS.fadeIn(200);
}

FORM.find(TYPES.join()).each(function(i) {
  $(this).focus(function() {
    el = $(this);

    $(window).resize(function() {
      position(el);
    });

    position(el);
  });
});

FORM.on("focusout", function(e) {
  setTimeout(function() {
    if (!e.delegateTarget.contains(document.activeElement)) {
      FOCUS.fadeOut(200);
    }
  }, 0);
});

// Code By Webdevtrick ( https://webdevtrick.com )

const FORM = $("form");

const TYPES = ["input[type=text]"];

const FOCUS = $("#focus");

function position(e) {

var props = {

top: e.offset().top,

left: e.offset().left,

width: e.outerWidth(),

height: e.outerHeight(),

radius: parseInt(e.css("border-radius"))

};

FOCUS.css({

top: props.top,

left: props.left,

width: props.width,

height: props.height,

"border-radius": props.radius

});

FOCUS.fadeIn(200);

}

FORM.find(TYPES.join()).each(function(i) {

$(this).focus(function() {

el = $(this);

$(window).resize(function() {

position(el);

});

position(el);

});

FORM.on("focusout", function(e) {

setTimeout(function() {

if (!e.delegateTarget.contains(document.activeElement)) {

FOCUS.fadeOut(200);

}

}, 0);

});

That’s It. Now you have successfully created CSS Moving Input Focus Effect With jQuery, Inputs in Signup Form. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.