instalar - habilitar javascript en chrome en windows
El complemento elegido no parece funcionar en los navegadores móviles (6)
He configurado un complemento elegido para un campo de selección para que el usuario pueda realizar una búsqueda de tipo de una larga lista.
Aunque estoy desarrollando esto para teléfonos móviles y mientras funciona bien en la computadora, está deshabilitado en los teléfonos de Apple y Android y aparece la interfaz de usuario predeterminada para la entrada seleccionada.
Me gustaría usar el plugin en los teléfonos.
Antes de usar cualquier plugin, intente verificar su alcance.
Chosen no es compatible con Android o IOS, "Chosen está deshabilitado en dispositivos móviles iPhone, iPod Touch y Android"
La función browser_is_supported en chosen.jquery.js ilustra que evita deliberadamente la activación en la plataforma Android y iPhone ( debido a varios problemas de UX ). Pero puedes hackearlo por ti mismo.
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;
};
La publicación aquí como un recurso alternativo lo he implementado, ya que dependía de que el complemento ChosenJS funcionara para que se pudiera aplicar CSS personalizado. Esperemos que esto ayude a alguien más.
Descargo de responsabilidad: la respuesta anterior por @dreamweiver aún debe ser la respuesta aceptada, dada la pregunta.
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 esto, luego uso .ui-select .chosen-mobile para aplicar el CSS necesario.
Para mí fue esta línea:
}, 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
}
Cambié a eso y funcionó a la perfección.
}, AbstractChosen.browser_is_supported = function() {
return true;
}
a discapacitados en tableta móvil
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;
};
AbstractChosen.browser_is_supported función AbstractChosen.browser_is_supported no le permite usar este complemento en dispositivos móviles e Internet Explorer, por lo que puede piratear esto por sí mismo.
Encuentre las líneas de abajo en chosen.jquery.js y comente este código. Ahora el plugin elegido funcionará en dispositivos móviles.
if (!AbstractChosen.browser_is_supported()) {
return this;
}
if (!AbstractChosen.browser_is_supported()) {
return;
}