Question

奇怪的是，当我更改正在显示的元素时，我的输入的自动对焦属性不起作用

请参阅随附的小提琴：https://jsfiddle.net/e53Lgnnb/6/

代码： HTML：

<body>
<!-- Email [POST] -->
<div class="" id="email" v-show="activeStep == 'email'">
    <form action="onboarding-5.html" @submit.prevent="submitForm('email', 'password')">
        <div class="form-row">
            <input type="email" autofocus required placeholder="email">
        </div>
        <p>
            <button type="submit" class="button">Ok <i class="icon arrow-right"></i></button>
        </p>
    </form>
</div>

<!-- Password [POST] -->
<div class="onboarding-content-wrap" id="password" v-show="activeStep == 'password'">
    <form action="onboarding-6.html">
        <div class="form-row">
            <input type="password" autofocus required placeholder="password">
        </div>
        <p>
            <button type="submit" class="button">Ok <i class="icon arrow-right"></i></button>
        </p>
    </form>
</div>
</body>

JS：

    new Vue({
    el: 'body',

    data: {
        activeStep: 'email',
    },

    methods: {

        // Show the step as active
        getNextStep: function (nextStep) {
            this.activeStep = nextStep;
        },

        submitForm: function (currentStep, nextStep) {
            this.getNextStep(nextStep);
            console.log(response.data);
        }
    }
});

发生了什么？非常感谢！

Answer 1

自动对焦仅适用于page load。如果您想在用户提交表单时更改焦点，我建议您为“activeStep”创建一个监视。

像这样的东西

watch:{
    activeStep(step){
        if( step === 'email'){
            this.$els.emailField.focus();
        }
        // ...
    }
},

更多信息：

自动对焦内容属性允许作者指示a   一旦页面加载，控件就会被聚焦，允许   用户只需开始输入而无需手动对焦主要部分   控制。

一定不能有两个具有相同最近祖先的元素   自动对焦范围根元素，它们都具有自动对焦属性   指定。

https://www.w3.org/TR/html5/forms.html#attr-fe-autofocus

Answer 2

检查这个jsfiddle

jsfiddle.net/blogui91/e53Lgnnb/12 /

我只是创建了一个显示输入的新组件，但是在创建时会有所不同，它会根据道具自动对焦自动对焦＆＃39;如果需要，也是如此。和一个名为＆＃39; model＆＃39;它将帮助您使用＆＃39; .sync＆＃39;更新父组件中的值。更新它，我希望它可以帮助你

Answer 3

临时工作直到我明白为什么它无法工作。添加：

watch: {
        activeStep: function () {
          $("#" + this.activeStep + " input[name=" + this.activeStep + "]").focus();
        }
    }

Answer 4

如果您将密码字段设为v-if而不是v-show，该怎么办？表单提交后，您将始终使用密码步骤，因此您无需担心提交表单时不存在的字段。因为v-if仅在它为真时才创建dom元素，所以autofocus属性会在创建时触发。

在v-show的Vue.js切换上丢失autofus

4 个答案: