Add floating label to read only textbox in Vue Textbox component

16 Mar 20235 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 ='wrap'>
        <div class="row">
          <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 class="row">
            <button class="e-btn update_value" id='valuebtn' v-on:click="valuebtnClick">Set value</button>
            <button class="e-btn remove_value" id='removebtn' v-on:click="removebtnClick">Remove value</button>

import Vue from 'vue';

export default {
   data: function() {
        return { }
    methods: {
        valuebtnClick: function(args){
            (document.getElementsByClassName('myField')[0]).value = '10';
        removebtnClick: function(args){
            (document.getElementsByClassName('myField')[0]).value = '';
        checkFloatingLabel: function(id) {
        var inputElement=  document.getElementById(id);
        var labelElement = inputElement.parentElement.querySelector('.e-float-text');
        if (inputElement.value !== '') {
        } else {
        var inputField = document.getElementById('myText');
    mounted: function() {
        // To get the all input fields and its container.

        let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

        // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

        for (let i = 0; i < inputElement.length; i++) {
            inputElement[i].addEventListener("focus", function () {
            inputElement[i].addEventListener("blur", function () {
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
.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;