Vuetify v-select 不支持键盘 tab 键答案

【问题标题】：Vuetify v-select does not support keyboard tab keyVuetify v-select 不支持键盘 tab 键
【发布时间】：2021-05-02 17:28:53
【问题描述】：

我有下面的表格供用户使用。这里的问题是，当我在 first_name 字段上并按键盘上的 tab 键时，它会将我带到 last_name 字段。当我在 last_name 字段上按 Tab 键时，它会跳过 city 字段并直接转到 phone_number 字段。我必须单击城市字段才能选择城市。 Tab 键不会带我进入 v-select。我正在使用 vuetify 2.3.10 版。我无法解决这个问题。知道如何解决这个问题吗？

<template>
  <div>
    <v-form :model='user'>
      <v-text-field
       label='First Name'
       v-model='user.first_name'>
      </v-text-field>
      <v-text-field
       label='Last Name'
       v-model='user.last_name'>
      </v-text-field>
      <v-select 
       :items="cities"
       attach
       item-text='name'
       item-value='name'
       v-model="user.city"
       label="City">
      </v-select>
      <v-text-field
       label='Phone Number'
       v-model='user.phone_number'>
      </v-text-field>
    </v-form>
  </div>
</template>

【问题讨论】：

在这里它可以正常工作codepen.io/MNSY22/pen/MWbgNjK
@Mohsen 没有。请尝试使用 Tab 键切换字段。它也不适用于您的代码笔。

标签： javascript vue.js vuetify.js v-select

【解决方案1】：

v-select 逻辑上是text 输入，打开的列表是v-list-item，所以如果你想让列表在焦点上打开，你必须将这样的代码添加到你的v-select

<v-select 
  @focus="($event) => {$event.target.click()}"
<v-select

这里是Codepen

【讨论】：

Mohsen 这不是问题，当我按下键盘上的标签按钮时，跳过城市的 v-select 字段并直接转到电话号码的 v-text-field 的问题我在姓氏字段
我猜是你的系统问题，这里是按tab键的时候v-select，我看不到任何问题，换个电脑试试
在codepen中，你添加了clicked方法。你在某处使用它吗？
首先，我输入@focus="clicked($event)"。后来，将@focus改为内联

【解决方案2】：

我刚刚遇到了这个问题，因为我早些时候遵循了this issue thread 中的建议。通过将 v-select 的输入样式设置为display: none，浏览器不再使用 Tab 键聚焦它。

解决方法是改用以下样式，将输入的宽度设置为 0，而不是完全隐藏：

.v-select__selections input {
    width: 0 !important;
    max-width: 0 !important;
}
.v-select__selections .v-select__selection {
    max-width: none;
}

【讨论】：