Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android 4.1.2 navegador predeterminado – problema de reproducción con campos de entrada inhabilitados

Parece que algunas versiones del navegador predeterminado de Android tienen un problema de renderizado. Si creo una página en la que tengo algún tipo de campo de entrada y un botón, cuando desactivo el otro campo de entrada, el botón aparece en gris (a menos que esto se haga en la carga de la página, tienes que hacer clic alrededor / Obtener el navegador para volver a renderizar).

Lo interesante es que no aplica el STYLE deshabilitado al botón, pero simplemente lo borra. Aquí hay una muestra.

Enlace al editor jsfiddle
Enlace a jsfiddle integrado

CSS:

ul { list-style-type:none; } .xxx { background: blue; color: white; } .xxx:disabled { background-color: red; } 

HTML:

 <div id="root"> <ul> <li> <input name="x" id="enable" class="x" type="radio">Enable</input> </li> <li> <input name="x" id="disable" class="x" type="radio">Disable</input> </li> </ul> <input type="button" class="xxx" value="Button"></input> </div> 

JS:

 $(function() { $('.x:eq(0)').prop('disabled', true); }); 

Cosas a tener en cuenta:

  • El botón NO está deshabilitado. Haga clic en él y temporalmente obtiene un-gris-out.
  • Hay un estilo para el estado deshabilitado del botón que establece su color de fondo en rojo (si deshabilita el botón, verá este trabajo), pero el botón no aparece en rojo en el ejemplo, por lo que ni siquiera es sólo la reproducción del estilo deshabilitado . Parece que principalmente sólo establecer la opacidad a un valor inferior
  • Un botón ANTES de los botones de radio no se verá afectado. Http://jsfiddle.net/YVFVZ/4/

¿Alguna idea de cómo solucionar esto?

  • Cómo cambiar el tamaño de un elemento de Java Script para que se ajuste a su ventana de contenedor
  • Html phonegap android: teclado numérico suave tiene siguiente en lugar de ir botón
  • ¿Cómo puedo evitar el desplazamiento salvaje cuando un campo de formulario de entrada de texto de posición fija obtiene el foco?
  • Android 7 WebView con wrap_content
  • Actualizar la lista HTML de Android usando Simperium
  • Cómo hacer un reemplazo sobre las webs cargadas en una Webview
  • ¿Hay una forma más rápida de decodificar caracteres html a una cadena de Html.fromHtml ()?
  • Multi Seleccionar cuadro <select> en dispositivos móviles
  • 3 Solutions collect form web for “Android 4.1.2 navegador predeterminado – problema de reproducción con campos de entrada inhabilitados”

    Finalmente lo resolví. No estoy muy contento con esta solución, pero parece que funciona.

    Si envuelve las entradas en una position: relative elemento position: relative , corrige el problema.

    Prueba a utilizar este DOM

    <div id="root"> <ul> <li> <input name="x" id="enable" class="x" type="radio" />Enable </li> <li>
    <input name="x" id="disable" class="x" type="radio" />Disable </li>
    </ul> <input type="button" class="xxx" value="Button" /> </div>

    Y también js como

     $(function() { $('.x:eq(0)').prop('disabled', 'disabled'); }); 

    Puede ser que esto podría ayudar.

    ¡Limpiemos parte de ese HTML!

    ¡Tenga un violín – acoplamiento del violín!

    1. Poner en algunas etiquetas adecuadas
    2. Quite las etiquetas </input> cierre que no son HTML válido . Permítanos cerrarlos para que sean bonitos (aunque esto no sea necesario a menos que esté usando XHTML).
    3. Quite el <ul> que parece superfluo cuando podemos usar un poco de CSS para colocar los elementos del formulario.
    4. Cambiar el nombre de esas clases a algo más relevante!

    HTML

     <div id="root"> <input name="buttonState" id="enable" class="action" type="radio" /> <label for="enable">Enable</label> <input name="buttonState" id="disable" class="action" type="radio" /> <label for="disable">Disable</label> <input type="button" class="button" value="Button" /> </div> 

    Jquery

    Por lo tanto, desea activar el botón cuando se hace clic en el botón de radio habilitar y desactivar cuando se hace clic en el botón de opción de desactivar? Aquí:

     $('#disable').click(function () { $('.button').attr('disabled', true); }); $('#enable').click(function () { $('.button').attr('disabled', false); }); 

    Por último, el CSS.

     .action { display: block; float: left; clear: left; margin: 0 10px; } label { display: block; margin: 10px 0; } .button { background: #00F; margin: 0 10px 10px 10px; } .button:disabled { background: #F00; } input, label { cursor: pointer; } 

    Encantador 🙂

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.