El complemento elegido no parece funcionar en navegadores móviles
He configurado un complemento Elegido para un campo de selección para que el usuario pueda escribir la búsqueda desde una lista larga.
Aunque estoy desarrollando esto para teléfonos móviles y mientras que funciona bien en la computadora, está deshabilitado en Apple y teléfonos Android y la interfaz de usuario por defecto aparece para la entrada seleccionada.
- ¿Cómo puedo crear una función similar a JQuery Slider en la aplicación web de iPhone / Android?
- Cómo comprobar mediante programación la disponibilidad de conexión a Internet usando jquery
- Phonegap, jQuery Mobile, Android, barra de herramientas no fija después de una entrada de texto
- Mostrar una imagen desde url externa usando phonegap / jquery para android
- jQuery Los deslizadores de gama Mobile no son lo suficientemente sensibles
Me gustaría usar el plugin en los teléfonos.
- ¿Los navegadores webview de android admiten funciones html5?
- Evitar que el cuerpo se desplace (navegadores móviles y nativos)
- JQuery y la compatibilidad del navegador móvil?
- Abrir un cuadro de selección con js en el navegador web de Android
- Error de acceso denegado con jQuery
- Bootstrap de Twitter: no se cambia el tamaño de la barra de navegación en el cambio de orientación (solo con el navegador de acciones de Android)
- Cómo obtener el ancho de ventana correcto en el cambio de orientación para dispositivos Android, tabletas y móviles
- JQuery preventDefault no funciona en el navegador predeterminado de android 4.4
Antes de usar cualquier complemento, intente comprobar su alcance.
Elegido no es compatible con android o IOS, "Elegido está deshabilitado en iPhone, iPod Touch y dispositivos móviles Android"
Revise el enlace oficial CHOZO aquí
La función browser_is_supported
in chosen.jquery.js
ilustra que evita deliberadamente la activación en plataforma Android y iPhone ( debido a varios problemas UX ). Pero puedes cortarlo 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; };
AbstractChosen.browser_is_supported
función AbstractChosen.browser_is_supported
no le permite usar este complemento en dispositivos móviles e Internet Explorer para que pueda hackearlo por usted mismo.
Encuentre las líneas de abajo en chosen.jquery.js
y comente este código. Ahora el complemento elegido funcionará en dispositivos móviles.
if (!AbstractChosen.browser_is_supported()) { return this; } if (!AbstractChosen.browser_is_supported()) { return; }
Inhabilitar 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; };
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 }
Cambiado a eso y funcionó como un encanto.
}, AbstractChosen.browser_is_supported = function() { return true; }
Publicar aquí como un fallback he implementado como yo estaba dependiendo de la ChosenJS plugin para trabajar para que CSS personalizado podría ser aplicado. Espero que esto ayude a alguien más.
Descargo de responsabilidad: La respuesta anterior por @dreamweiver todavía 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, entonces uso .ui-select .chosen-mobile
para aplicar el CSS necesario.
- Alternativa para String.join en Android?
- Implementar seguridad a nivel de firma en los servicios de Android con más de una firma permitida