floatlabel
v1.0.6
Published
jqueryFloatingLabel
Downloads
41
Maintainers
jamalrefaideenReadme
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