Add floating label to read-only textbox

23 Dec 20241 minute to read

You can programatically add or remove the value to the readonly TextBox.

In this sample, click the update value button to fill the read-only textbox with value and float a label.

@using Syncfusion.EJ2.Inputs
 <div class="control-section">
     @Html.EJS().TextBox("float-textbox").Placeholder("Enter value").Readonly(true).FloatLabelType(FloatLabelType.Auto).Render()
     @Html.EJS().Button("valuebtn").Content("Set value").Render()
     @Html.EJS().Button("removebtn").Content("Remove value").Render()
 </div>
 <script>
    
    var textboxObj;
    
    document.getElementById('valuebtn').onclick = () => {
        textboxObj = document.getElementById('float-textbox').ej2_instances[0]
        textboxObj.value = "10";
    }
    document.getElementById('removebtn').onclick = () => {
        textboxObj.value = "";
    }

</script>

 <style>
    .wrap {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 20px 10px;
        width: 260px;
    }

    .update_value, .remove_value {
        margin-top: 20px;
    }

    .remove_value {
        margin-left: 10px;
    }
</style>
public ActionResult Index()
{
    return View();
}