页面加载时无法将焦点设置到文本区域

Question

我正在尝试将焦点设置在 syncfusion textarea 上，但我无法这样做。当组件按定义 here 安装时，我使用了 this.$nextTick 但系统仍然不关注文本区域。我在 created 事件中添加了相同的 "focus to textarea" 代码，因为 created 事件在 mounted 事件之后以某种方式被触发。我重新创建了问题 here。我还看到 this.$refs.vocabularies.$el returns input#vocabularies.e-control.e-textbox.e-lib.

我做错了什么？

<template>
            <ejs-textbox cssClass="height:500px;" id='vocabularies' :multiline="true" placeholder="Enter your vocabularies" floatLabelType="Auto" :input= "inputHandler" v-model="vocabularies" ref="vocabularies"/>
</template>
<script>
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-vue-inputs/styles/material.css';    
export default
{
    data() {
        return {
            vocabularies: '',
            inputHandler: (args) => 
            {
                args.event.currentTarget.style.height = "auto";
                args.event.currentTarget.style.height = (args.event.currentTarget.scrollHeight)+"px";
            },
        }
    },
    mounted() 
    {       
        this.$nextTick(function()
        {
            this.$refs.vocabularies.$el.style.height = "auto";
            this.$refs.vocabularies.$el.style.height = (this.$refs.vocabularies.$el.scrollHeight)+"px";
            this.$refs.vocabularies.$el.focus();
        console.log(`mounted run`);
        });
    },
    async created() 
    {
        this.$nextTick(function()
        {
            this.$refs.vocabularies.$el.style.height = "auto";
            this.$refs.vocabularies.$el.style.height = (this.$refs.vocabularies.$el.scrollHeight)+"px";
            this.$refs.vocabularies.$el.focus();
            console.log(`created run`);
        });
    }, 
</script>

Answer 1

所以，我是这样解决的。我不太确定这种方法有多好，因为我没有使用过 syncfusion，所以不能说是否有更好的方法。

<ejs-textbox cssClass="test" id='vocabularies' :multiline="true" placeholder="Enter your vocabularies" floatLabelType="Auto" :input= "inputHandler" v-model="vocabularies" ref="vocabularies"/>

然后在 mounted 我做了

mounted() {
 let a = document.getElementsByClassName('test')[0];
 a.children[1].focus();
}

Answer 2

根据文档 here

，我能够通过在 mounted() 方法中使用 this.$refs.vocabularies.focusIn(); 来解决问题

Answer 3

您可以在创建的事件中使用TextBox组件的focusIn public方法来聚焦文本区域。请参考以下代码，

    <ejs-textbox cssClass="height:500px;" id='vocabularies' :multiline="true" placeholder="Enter your vocabularies" floatLabelType="Auto" :input= "inputHandler" v-model="vocabularies" ref="vocabularies" :created='onCreated' />


     onCreated:function(){
         this.$refs.vocabularies.ej2Instances.focusIn()
     }

请从下面link,

中找到样本

样本Link：

https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart1111977605

页面加载时无法将焦点设置到文本区域

Unable to set focus to a textarea, when the page loads

syncfusion

vue.js

vue-component

vuejs2