更改编辑模式Vue.js + Typescript后如何专注于输入字段

Posted 2023-02-23

【中文标题】更改编辑模式Vue.js + Typescript后如何专注于输入字段

【英文标题】：How to focus on input field after change edit mode Vue.js + Typescript

【发布时间】：2020-11-16 14:07:34

【问题描述】：

在我更改了 mode d'édition 之后，我尝试设置输入字段的焦点。但焦点未设置在输入字段上。在输入出现之前，我们有一个必须单击以显示输入的字段，因此我希望通过单击此字段直接设置输入的焦点，并且我没有再次单击输入。请帮帮我

感谢您的帮助

<script lang="ts">
    import Vue from 'vue';
    import ObjetDocument from '../../../models/IObjetDocument';
    import  textearaAutoHeight  from '../../../assets/scripts/animateInput';

    export default Vue.extend(
        props: 
            objetDocument: 
                type: String,
                required: true
            ,
            enEditionObjet: 
                type: Boolean,
                required: true
            ,
            typeDocument: 
                type: String,
                required: true
            
        ,
        data: function () 
            return 
                enEdition: this.enEditionObjet,
                messageErreur: "",
                objet: "",
                objetTextarea: ""
            
        ,
        watch: 
            objet: function () 
                if (!this.objet) 
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                
                else 
                    this.messageErreur = "";
                
            ,
            objetTextarea: function () 
                if (!this.objetTextarea) 
                    this.messageErreur = this.$t('messageInputObjetVide').toString();
                
                else 
                    this.messageErreur = "";
                
            ,
            objetDocument: function () 
                this.objet = this.objetDocument;
                this.convertObjethtmlToObjetTextarea(this.objetDocument)
            ,
            enEditionObjet: function () 
                this.enEdition = this.enEditionObjet;
            
        ,
        methods: 
            undoChange: function () 
                this.objet = this.objetDocument;
                this.convertObjetHtmlToObjetTextarea(this.objetDocument);
                this.changeModeEdition();
            ,
            updateObjet: function (e) 
                if (!this.messageErreur) 
                    this.$emit('update', this.objet);
                
                e.preventDefault();
            ,
            changeModeEdition: function () 
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight()
            ,
            convertObjetTextareaToObjetHtml: function (value: string) 
                this.objet = value.replace(/\n/gi, "<br/>");
            ,
            convertObjetHtmlToObjetTextarea: function (value: string) 
                this.objetTextarea = value.replace(/<br\/>/gi, "\n");
            
        ,
        mounted: function () 
            textearaAutoHeight()
        ,
        created: function () 
            this.objet = this.objetDocument;
            this.convertObjetHtmlToObjetTextarea(this.objetDocument);
        
    )
</script>

<template>
    <div class="editable-container">
        <div v-if="objet" class="editable hover-pointer"
             v-show="!enEdition"
             @click="changeModeEdition"
             v-html="objet">
        </div>
        <div v-if="!objetDocument" class="editable hover-pointer text-grey"
             v-show="!enEdition"
             @click="changeModeEdition"
             style="font-style:italic">
            <div v-if="typeDocument=='Facture'"> $t('visualisationObjetVide_dela',  typeDocument : typeDocument.toLowerCase()  )</div>
            <div v-if="typeDocument=='Avoir' || typeDocument=='Acompte'"> $t('visualisationObjetVide_del',  typeDocument : typeDocument.toLowerCase()  )</div>
            <div v-if="typeDocument=='Devis'"> $t('visualisationObjetVide_du',  typeDocument : typeDocument.toLowerCase()  )</div>
        </div>

        <div v-show="enEdition">
            <form @submit="updateObjet">
                <div class="inputGroup inputGroup-white inputGroup-facturation">
                    <textarea v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
                    <label class="inputGroup--label">$t('texteLabelObjet') </label>
                    <div v-if="messageErreur" class="text-invalid">messageErreur</div>
                </div>
                <div class="navAction">
                    <button type="submit" class="navAction--btn" @click="convertObjetTextareaToObjetHtml(objetTextarea)"><i class="fas fa-check"></i></button>
                    <button type="button" @click="undoChange" class="navAction--btn"><i class="fas fa-undo-alt"></i></button>
                </div>
            </form>
        </div>
    </div>
</template>
<i18n src="../../../localization/facturation/Objet.json"></i18n>

【参考方案1】：

向输入添加一个引用，如下所示：

  <textarea ref='objet' v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
            

然后在你的方法中添加这一行：

 this.$nextTick(() => this.$refs.objet.focus());

喜欢

  changeModeEdition: function () 
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight();
                 this.$nextTick(() => this.$refs.objet.focus());
            ,

并在您的组件实例中声明$refs：

import Vue,  VueConstructor  from 'vue';

 export default (Vue as VueConstructor<Vue &
    
        $refs:
         objet: HTMLFormElement ,
    
    >).extend(
 props:
  ...

【讨论】：

我之前试过这个，但它不起作用我有以下错误：The 'focus' property does not exist on the' View | Element | View [] | Element[]'.。所以我尝试了这样的 jQuery：$(this.$refs.object).focus(); 但它仍然不起作用

在您的组件中，要摆脱错误，请执行 public $refs : objet: HTMLFormElement

感谢@Tony 我将属性$refs 添加到组件实例中

感谢您的帮助！我修改了代码以使其真正起作用。所以我必须没有像这样完成焦点的错误：import Vue, VueConstructor from 'vue'; export default (Vue as VueConstructor<Vue &$refs: objet: HTMLFormElement , >).extend( props: .... 为了使焦点起作用，您必须执行此代码才能在下一个刻度中调用焦点：this.$nextTick(() => this.$refs.objet.focus());

不客气，感谢您编辑我的答案，如果有帮助可以投票