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.

<div class="control-section">

    <ejs-textbox id="float-textbox" placeholder="Enter value" readonly="true" floatLabelType="Auto"></ejs-textbox>

    <ejs-button class="e-btn update_value" id='valuebtn' content="Set value"></ejs-button>
    
    <ejs-button class="e-btn remove_value" id='removebtn' content="Remove value"></ejs-button>
    
</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();
}