Запретить вызов программной клавиатуры после нажатия поля со списком VuetifyJS

Мне нужно использовать поле со списком VuetifyJS на мобильном устройстве. Как только поле со списком получает нажатие, оно вызывает экранную клавиатуру. Как предотвратить срабатывание программной клавиатуры? Пример 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'
      ]
    }
  }
})

javascript vue.js vuetify.js progressive-web-apps soft-keyboard
person Tom    schedule 26.08.2018    source источник
comment
Почему вместо этого вы не используете v-select? Вероятно, он делает именно то, что вы хотите, из коробки. Вот демонстрация замены v-combo на v-select в вашем Codepen: codepen.io/tony19/pen/bxwdJj   -  person tony19    schedule 29.08.2018

Ответы (2)


arrow_upward
3
arrow_downward

Проверьте Руководство по Vuetify: Combobox API, есть одно свойство = тип , который устанавливает тип ввода (если вы откроете инспектор браузера, вы увидите, как Vuetify создает поле со списком), а его значение по умолчанию - «текст». Вот почему панель функциональных клавиш автоматически всплывает при нажатии на нее.

Одно быстрое решение: установите его на кнопку. (Но потенциальный риск состоит в том, что пользователь больше не может изменять значение вручную. Особенно вам нужно реализовать одно поле со списком с возможностью поиска)

Посмотрите демонстрацию ниже (или откройте кодовое слово на своем мобильном телефоне):

Изменить: выровнять вводимый текст по левому краю в соответствии со спецификой 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/[email protected]/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/[email protected]/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>

person Sphinx    schedule 28.08.2018
comment
Отлично работает, но текст теперь выровнен по центру, а не по левому краю. Это не сработало: <v-combobox class="text-xs-left Есть идеи, как это исправить? - person Tom; 29.08.2018
comment
@Tom, проверьте обновленный ответ, он должен соответствовать вашим требованиям. - person Sphinx; 29.08.2018

arrow_upward
1
arrow_downward

Согласно этому ответу, используя readonly="true" решить проблему, я обнаружил codePen с более продвинутыми функциями, чтобы попробовать и протестировать концепцию. Combobox имеет параметр readOnly и, вероятно, может быть открыт каким-нибудь JS ... но!

Если вам нужно поле со списком без необходимости ввода данных пользователем, почему бы не использовать выборки тем же библиотека? При правильных параметрах он отображается как поле со списком.

person Nomis    schedule 28.08.2018