Category / Section
Floating Label Functionality in JavaScript Numeric Textbox.
1 min read
In EJ Textboxes components the floating label functionality can achievable in application level. We can form the below element structure and add the corresponding class (“e-float-container, e-float-text”) to achieve the floating label functionality to get the Material theme like floating appearance.
The following code demonstrates How to achieve floating labels functionalities in EJ Textboxes controls.
HTML:
<div class=" e-float-container"> <input id="numeric" type="text" /> <label class=" e-float-text">Enter numeric value</label> </div> <div class=" e-float-container"> <input id="percent" type="text" /> <label class=" e-float-text">Enter percentage value</label> </div> <div class=" e-float-container"> <input id="currency" type="text" /> <label class=" e-float-text">Enter currency value</label> </div>
JAVASCRIPT:
<script type="text/javascript">
$(function () {
$("#numeric").ejNumericTextbox(
{
name: "numeric",
width:"100%",
watermarkText: "",
});
$("#percent").ejPercentageTextbox(
{
name: "percentage",
width:"100%",
watermarkText: "",
});
$("#currency").ejCurrencyTextbox(
{
name: "currency",
width:"100%",
watermarkText: "",
});
});
</script>
The below screenshots displays the output of above code.
Figure 1: Output
Figure 2: Output
A sample is available in the following location: Sample location
Note:
This support only applicable for after the Vol 2,2017(15.2.0.40) release
