Add floating label to read-only textbox

17 Feb 20223 minutes to read

You can achieve floating label for read-only textboxes by adding/removing e-label-top and e-label-bottom classes to the label element

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

<div class="control-section">
    <div class="control_wrapper accordion-control-section">
        <div class="e-float-input">
            <input class="e-input myField" id="myText" name="readonlyAttr" type="text" readOnly>
            <span class="e-float-line"></span>
            <label class="e-float-text">Enter value</label>
        </div>
        <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>
</div>
<script>
    ej.base.enableRipple(true);

    document.getElementById('valuebtn').onclick = () => {
        (document.getElementsByClassName('myField')[0]).value = '10';
        checkFloatingLabel('myText')
    }
    document.getElementById('removebtn').onclick = () => {
        (document.getElementsByClassName('myField')[0]).value = '';
        checkFloatingLabel('myText')
    }

    function checkFloatingLabel(id) {
        var inputElement = document.getElementById(id);
        var labelElement = inputElement.parentElement.querySelector('.e-float-text');
        if (inputElement.value !== '') {
            labelElement.classList.remove('e-label-bottom');
            labelElement.classList.add('e-label-top');
        } else {
            labelElement.classList.remove('e-label-top');
            labelElement.classList.add('e-label-bottom');
        }
    }
    var inputField = document.getElementById('myText');

</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();
}