Запретить вызов программной клавиатуры после нажатия поля со списком 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Согласно этот ответ, использование readonly = "true" для решения проблемы, я нашел codePen с более продвинутыми функциями, чтобы попробовать и протестировать концепцию. Combobox имеет параметр readOnly и, вероятно, может быть открыт каким-нибудь JS ... но!
Если вам нужно поле со списком без необходимости ввода данных пользователем, почему бы не использовать выбор из той же библиотеки? При правильных параметрах он отображается как поле со списком.
Отметьте Руководство Vuetify: Combobox API, есть одно свойство prop = тип, которое Устанавливает тип ввода (если вы откроете инспектор браузера, вы увидите, как 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>Отлично работает, но текст теперь выровнен по центру, а не по левому краю. Это не сработало: <v-combobox class = "text-xs-left Есть идеи, как это исправить?
@Tom, проверьте обновленный ответ, он должен соответствовать вашим требованиям.
Почему вы не используете вместо этого
v-select? Вероятно, он делает именно то, что вы хотите, из коробки. Вот демонстрация заменыv-comboнаv-selectв вашем Codepen: codepen.io/tony19/pen/bxwdJj