Il plugin scelto non sembra funzionare sui browser mobili [chiuso]
-
21-12-2019 - |
Domanda
Ho impostato un Plugin scelto per un campo selezionato in cui l'utente possa digitare e cercare da un lungo elenco.
Anche se lo sto sviluppando per i telefoni cellulari e sebbene funzioni bene sul computer, è disabilitato sia sui telefoni Apple che su quelli Android e viene visualizzata l'interfaccia utente predefinita per l'input selezionato.
Vorrei utilizzare il plugin sui telefoni.
Soluzione
Prima di utilizzare qualsiasi plugin, prova a verificarne l'ambito.
La scelta non è supportata su Android o IOS, "Scelto è disabilitato su iPhone, iPod Touch e dispositivi mobili Android"
Altri suggerimenti
Funzione browser_is_supported
In chosen.jquery.js
illustra che evita deliberatamente l'attivazione sulla piattaforma Android e iPhone (a causa di diversi problemi di UX).Ma puoi hackerarlo da solo.
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
La funzione non ti consente di utilizzare questo plugin su dispositivi mobili e Internet Explorer, quindi puoi hackerarlo da solo.
Trova le righe seguenti in chosen.jquery.js
e commentare questo codice.Ora il plugin scelto funzionerà sui dispositivi mobili.
if (!AbstractChosen.browser_is_supported()) {
return this;
}
if (!AbstractChosen.browser_is_supported()) {
return;
}
disabilitato nel tablet 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;
};
Pubblicando qui come fallback che ho implementato poiché dipendevo dal plugin ChosenJS per funzionare in modo da poter applicare CSS personalizzati.Spero che questo aiuti qualcun altro.
Disclaimer: La risposta sopra di @dreamweiver dovrebbe essere comunque la risposta accettata, data la domanda.
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') );
}
});
});
}
}
Con questo, poi uso .ui-select .chosen-mobile
per applicare il CSS necessario.
Per me era questa riga:
}, 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
}
cambiato in quello e ha funzionato a meraviglia.
}, AbstractChosen.browser_is_supported = function() {
return true;
}