Label Overview
The Label enables you to associate the label HTML element with the MaskedTextBox.
Basic Usage
To associate a MaskedTextBox with a Label, set the label property by providing a string or a function. The string and the function parameters are setting the inner HTML of the label.
The following example demonstrates how to set a Label for a MaskedTextBox from a string.
<!-- Define the HTML div that will contain the MaskedTextBox. -->
<input id="maskedtextbox" />
<!-- Initialize the MaskedTextBox with a Label. -->
<script>
$(document).ready(function(){
$("#maskedtextbox").kendoMaskedTextBox({
label: "Phone number"
});
});
</script>
The following example demonstrates how to set a Label for a MaskedTextBox from a function. The function context (available via the this keyword) will be set to the widget instance.
<!-- Define the HTML div that will contain the MaskedTextBox. -->
<input id="maskedtextbox" />
<!-- Initialize the MaskedTextBox with a Label. -->
<script>
$(document).ready(function(){
$("#maskedtextbox").kendoMaskedTextBox({
label: function() {
return "Phone number";
}
});
});
</script>
The Label also exposes a content property that sets the inner HTML of the label.
The below example demonstrates how to create a Label from a string.
<!-- Define the HTML div that will contain the MaskedTextBox. -->
<input id="maskedtextbox" />
<!-- Initialize the MaskedTextBox with a Label Content. -->
<script>
$(document).ready(function(){
$("#maskedtextbox").kendoMaskedTextBox({
label: {
content: "Phone number"
}
});
});
</script>
The below example demonstrates how to create a Label from a function.
<!-- Define the HTML div that will contain the MaskedTextBox. -->
<input id="maskedtextbox" />
<!-- Initialize the MaskedTextBox with a Label Content. -->
<script>
$(document).ready(function(){
$("#maskedtextbox").kendoMaskedTextBox({
label: {
content: function() {
return "Phone number";
}
}
});
});
</script>
Floating Label
The Floating Label enables you to provide a floating label functionality to the MaskedTextBox.
The following example demonstrates how to set a Floating Label for a MaskedTextBox.
<!-- Define the HTML div that will contain the MaskedTextBox. -->
<input id="maskedtextbox" />
<!-- Initialize the MaskedTextBox with a Floating Label. -->
<script>
$(document).ready(function(){
$("#maskedtextbox").kendoMaskedTextBox({
label: {
content: "Phone number",
floating: true
}
});
});
</script>
If set to true, the widget will be wrapped in a container that will allow the floating label functionality.
Important: The value method does not trigger the
focusoutevent of the input. This could affect the floating label functionality. You can overcome this behavior by manually invoking therefreshmethod of the Floating Label:$("#maskedtextbox").data("kendoMaskedTextBox").floatingLabel.refresh();