Methods in Vue TextArea Component

11 Jun 20248 minutes to read

This section outlines the methods available for interacting with the TextArea component.

FocusIn method

The focusIn method in the TextArea, is used to set focus to the textarea element, enabling user interaction.

By calling the focusIn method, you can programmatically set focus to the TextArea component, allowing users to interact with it via keyboard input or other means.

<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Focus-in</button>
    </div>
  </div>
</template>
<script setup>
import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';
import { onMounted, ref } from 'vue';

const textareaRef = ref(null);

onMounted(() => {
  document.getElementById('button').onclick = () => {
  textareaRef.value.focusIn();
  };
});

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Focus-in</button>
    </div>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  },
  mounted: function () {
    document.getElementById('button').onclick = () => {
      this.$refs.textareaRef.focusIn();
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

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

FocusOut method

The focusOut method in the TextArea component is used to remove focus from the textarea element, ending user interaction.
This method is beneficial for scenarios where user need to programmatically remove focus from the TextArea component, such as after completing a specific task or when navigating to another element in the application.

<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Focus-Out</button>
    </div>
  </div>
</template>
<script setup>
import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';
import { onMounted, ref } from 'vue';
const textareaRef = ref(null);
onMounted(() => {
  document.getElementById('button').onclick = () => {
    textareaRef.value.focusOut();
  };
});
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Focus-Out</button>
    </div>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  },
  mounted: function () {
    document.getElementById('button').onclick = () => {
      this.$refs.textareaRef.focusOut();
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

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

GetPersistData method

The getPersistData method in the TextArea component retrieves the properties that need to be maintained in the persisted state.
This method returns an object containing the properties to be persisted, which can include various configuration options and state information of the TextArea component.

<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Get Persist-data</button>
    </div>
  </div>
</template>
<script setup>
import { TextAreaComponent as EjsTextarea } from '@syncfusion/ej2-vue-inputs';
import { onMounted, ref } from 'vue';

const textareaRef = ref(null);

onMounted(() => {
  document.getElementById('button').onclick = () => {
    textareaRef.value.ej2Instances.getPersistData();
  };
});

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}
</style>
<template>
  <div class='wrap'>
    <div id='input-container'>
      <ejs-textarea id="default" ref="textareaRef"></ejs-textarea>
      <br />
      <button id="button">Get Persist-data</button>
    </div>
  </div>
</template>
<script>
import { TextAreaComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: "App",
  components: {
    "ejs-textarea": TextAreaComponent
  },
  data: function () {
    return {}
  },
  mounted: function () {
    document.getElementById('button').onclick = () => {
      this.$refs.textareaRef.ej2Instances.getPersistData();
    };
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

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