Package detail

floatlabel

JAMAL6267MIT1.0.6

jqueryFloatingLabel

npm, npm-floatinglabel, npm-floatlabel, floatingLabel

readme

JqueryFloatingLabel

It is a javascript user-friendly floating label

Demo

Here it is a Demo. please click here;

Usage

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FloatingLabel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    <script src="floatinglabel.js"></script>

</head>
<body>
     <div class="floatingName">
        <input type="text">
        <label>FirstName</label>
      </div>

</body>
</html>

Step: 1 EndUser to be add any ClassName to DivTag

<div class="floatingName">
        <input type="text">
        <label>FirstName</label>
 </div>

Step: 2 Add this jscode to the scriptTag

 <script type = "text/javascript" >
    $(document).ready(function() {
       $('.floatingName').floatingLabel();
     }); 
 </script>

Props

Name optional Default
fontSize yes inherit
id no
label yes
blur yes
focus yes
type yes
div yes
className yes

Using NPM

To install using the npm package manager run

npm install floatlabel

License

MIT