1.0.6 • Published 5 years ago
floatlabel v1.0.6
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