vue 材质 md-input 焦点行为

Posted 2023-02-22

【中文标题】vue 材质 md-input 焦点行为

【英文标题】：vue material md-input focus behaviour

【发布时间】：2018-04-06 11:43:57

【问题描述】：

这很奇怪，所以我希望这是有道理的。

我有一个登录表单，我正在尝试调整 vue 材质组件，它目前看起来像这样

<template>
<md-layout>
  <md-layout md-flex="100" md-align="center">
    <form class="login-form" role="form" @submit.prevent="submit">
        <md-input-container>
            <div v-bind:class=" 'has-error': errors.email ">
                <label>enter email address</label>
                <md-input v-model="email" required></md-input>
                <span class="help-block" v-if="errors.email"> errors.email[0] </span>
            </div>
        </md-input-container>
        <md-input-container>
            <div v-bind:class=" 'has-error': errors.password ">
                <label>enter password</label>
                <md-input type="password" v-model="password" required></md-input>
                <span class="help-block" v-if="errors.password"> errors.password[0] </span>
            </div>
        </md-input-container>
        <md-button class="md-raised md-primary">Login</md-button>
    </form>
  </md-layout>
</md-layout>
</template>

提交代码简介

methods: 
        submit() 
            console.log('login...');
        

奇怪的行为是，当我单击输入标签时，除非我单击该字段的绝对左侧，否则它不会获得焦点并且我无法输入它。因此，如果您想象上面的占位符文本“输入电子邮件地址”，除非我右键单击“输入....”中的“e”，否则它不起作用！ （或者如果我进入它，它将按预期获得焦点）

基于该代码的任何想法？

登录表单样式并没有做任何疯狂的事情：

.login-form 
   background: #FFFFFF;
   min-width: 40vh;
   padding: 65px;
   text-align: center;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

另外，如果有人可以建议如何自动聚焦第一个电子邮件字段，那就太好了 - vue 材料文档并没有说太多（据我发现）

【参考方案1】：

由于您没有提供“（不）工作”示例，我应该especulate 一点点。我使用 Vue-material 并且没有任何输入问题，但是我们使用 md-input-container 元素来包装我们的输入，而其中没有 div，例如：

<md-input-container>
    <label>Initial value</label>
    <md-input v-model="initialValue"></md-input>
</md-input-container>

另一个值得一看的是min-width: 40vh;。如果把它改成固定宽度（即100px），还是会出现同样的效果吗？或者跨度可能与您的输入重叠......您是否尝试过使用Inspector 进行调试？

为了专注于电子邮件输入，您可以通过添加ref 选项来归档它，例如：

<md-input v-model="email" required ref='emailInput' ></md-input>

在mounted()函数中你可以设置：

this.$refs.emailInput.focus()

希望对你有帮助！

【讨论】：

我太傻了 - 谢谢你是对的 - 外部 div 实际上覆盖了标签并导致了这个问题，谢谢！