Запретить активацию программной клавиатуры после нажатия на выпадающий список VuetifyJS - PullRequest
Новая
       39

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

0 голосов
/ 26 августа 2018

Мне нужно использовать 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'
      ]
    }
  }
})

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Проверка Руководство по 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/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>
0 голосов
/ 28 августа 2018

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

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

...