防止在点击 VuetifyJS 组合框后调用软键盘

Question

我需要在移动设备上使用VuetifyJS combobox。一旦组合框字段被点击，它就会调用软键盘。如何防止软键盘触发？ CodePen 示例：https://codepen.io/anon/pen/KxVEea

HTML：

  <v-combobox
  v-model="select
  :items="items"
  label="Select an item"
  ></v-combobox>

JS：

new Vue({
  el: '#app',
  data () {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

Answer 1

根据this answer 使用readonly="true" 解决问题，我发现a codePen 具有更高级的功能来尝试和测试这个概念。 Combobox 有一个 readOnly 参数，可能会被一些 JS 打开......但是！

如果您需要一个不需要用户输入的组合框，为什么不使用 the selects by the same library 呢？使用适当的参数，它就像一个组合框一样呈现。

Answer 2

检查Vuetify Guide: Combobox API，有一个prop=type，它设置输入类型（如果你打开浏览器检查器，你会看到Vuetify是如何构造组合框的） ，其默认值为“文本”。这就是为什么点击软键板时会自动弹出的原因。

一个快速解决方案，将其设置为按钮。 （但潜在的风险是用户无法再手动更改值。特别是您希望实现一个可搜索的组合框）

查看下面的演示（或open the codepen in your mobile）：

编辑：通过 CSS 特性将输入文本左对齐（请查看下面演示中的 CSS 部分）。

new Vue({
  el: '#app',
  data() {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

.v-menu input[type=button][role=combobox] {
  text-align: left;
}

.v-select__slot > input[type=button][role=combobox] { 
  /*text-align: left;   this one works also, you can open browser inspector, then build your own */
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout wrap>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" label="Select a favorite activity or create a new one" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use chips" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use a scoped slot" type="button">
            <template slot="selection" slot-scope="data">
              <v-chip
                :selected="data.selected"
                :disabled="data.disabled"
                :key="JSON.stringify(data.item)"
                class="v-chip--select-multi "
                @input="data.parent.selectItem(data.item)"
                type="button"
              >
                <v-avatar class="accent white--text">
                  {{ data.item.slice(0, 1).toUpperCase() }}
                </v-avatar>
                {{ data.item }}
              </v-chip>
            </template>
          </v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" chips label="I'm readonly" readonly></v-combobox>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>