gpt4 book ai didi

javascript - Vue.js 上失去自动融合功能

转载 作者:行者123 更新时间:2023-12-02 15:10:17 24 4
gpt4 key购买 nike

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

请参阅随附的 fiddle :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);
}
}
});

发生什么事了?多谢 !

最佳答案

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

类似这样的事情

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

更多信息:

The autofocus content attribute allows the author to indicate that acontrol is to be focused as soon as the page is loaded, allowing theuser to just start typing without having to manually focus the maincontrol.

There must not be two elements with the same nearest ancestorautofocus scoping root element that both have the autofocus attributespecified.

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

关于javascript - Vue.js 上失去自动融合功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34820842/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com