Я установил Chosen plugin для поля выбора, чтобы пользователь мог вводить поиск из длинного списка.
Хотя я разрабатываю это для мобильных телефонов, и, хотя он отлично работает на компьютере, он отключен как на телефонах Apple, так и на Android, и пользовательский интерфейс по умолчанию появляется для ввода ввода.
Я хотел бы использовать плагин на телефонах.
Прежде чем использовать какой-либо плагин, попробуйте проверить его область действия.
Выбранный не поддерживается на Android или IOS, "Выбранный отключен на iPhone, iPod Touch и мобильных устройствах Android"
Функция browser_is_supported в chosen.jquery.js иллюстрирует, что она намеренно избегает активации на платформе Android и iPhone (из-за нескольких проблем UX). Но вы можете взломать его самостоятельно.
AbstractChosen.browser_is_supported = function() {
if (window.navigator.appName === "Microsoft Internet Explorer") {
return document.documentMode >= 8;
}
if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
return false;
}
if (/Android/i.test(window.navigator.userAgent)) {
if (/Mobile/i.test(window.navigator.userAgent)) {
return false;
}
}
return true;
};
AbstractChosen.browser_is_supported функция не позволяет вам использовать этот плагин на мобильных устройствах и в Internet Explorer, чтобы вы могли взломать это самостоятельно.
Найдите ниже строки в chosen.jquery.js и прокомментируйте этот код. Теперь выбранный плагин будет работать на мобильных устройствах.
if (!AbstractChosen.browser_is_supported()) {
return this;
}
if (!AbstractChosen.browser_is_supported()) {
return;
}
отключено в планшете mobile
AbstractChosen.browser_is_supported = function () {
if (window.navigator.appName === "Microsoft Internet Explorer") {
return document.documentMode >= 8;
}
//if (/iP(od|hone)/i.test(window.navigator.userAgent))
if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent))
{
return false;
}
if (/Android/i.test(window.navigator.userAgent)) {
if (/Mobile/i.test(window.navigator.userAgent)) {
return false;
}
}
return true;
};
Проводка здесь в качестве резервной копии, которую я реализовал, поскольку я был в зависимости от плагина ChosenJS, чтобы работать, чтобы пользовательский CSS мог применяться. Надеюсь, это поможет кому-то еще.
Отказ от ответственности: Ответ выше на @dreamweiver должен все же быть принятым ответом, учитывая вопрос.
var chosenSelects = $('.ui-select').find('.chosen-select, [chosen]'),
$select, $option;
if (chosenSelects) {
chosenSelects.chosen();
// Check for 'chosen' elements on mobile devices
// -----
// Given that ChosenJS has expressly been disabled from running
// on mobile browsers, the styles have to be applied manually.
// Source: https://github.com/harvesthq/chosen/pull/1388
// -----
// The code below gathers all 'chosen' selectors and adds
// 'chosen-mobile' as a className. This className is then
// used to apply the necessary styles for mobile browsers.
// Within each select, if an 'option' has an empty value,
// then that value will be given 'selected' and 'disabled'
// attributes to act as a placeholder, adopting the text
// in the 'data-placeholder' as the text to be displayed.
if ( /iP(od|hone)/i.test(window.navigator.userAgent)
|| (/Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent)) ) {
chosenSelects.each(function () {
$select = $(this);
$select.addClass('chosen-mobile');
$select.find('option').each(function () {
$option = $(this);
if ( $option.val() == '' ) {
$option
.attr('selected', 'selected')
.attr('disabled', 'disabled')
.text( $select.data('placeholder') );
}
});
});
}
}
С этим я затем использую .ui-select .chosen-mobile, чтобы применить необходимый CSS.
Для меня это была строка:
}, AbstractChosen.browser_is_supported = function() {
return "Microsoft Internet Explorer" === window.navigator.appName ? document.documentMode >= 8 : /iP(od|hone)/i.test(window.navigator.userAgent) ? !1 : /Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent) ? !1 : !0
}
изменился на это, и он работал как шарм.
}, AbstractChosen.browser_is_supported = function() {
return true;
}