Hacer que un evento jQuery se active con entradas de teclado y mouse dentro de un elemento de selección

OK aquí va

Estoy intentando escribir un script que, cuando un usuario teclea o hace clic en un <option id='blselect'> dentro de un <select> elemento se desencadena un evento que muestra un elemento oculto. Si alguno de los otros <option class='unselect'> se hace clic en, se ocultará el elemento mencionado anteriormente.

He conseguido que el script funcione perfectamente en lo que respecta a los clics del usuario, pero el problema es si el usuario utiliza el teclado para trabajar en el formulario.

El evento que desea desencadenarse para el <option id='blselect'> mostrar es como tal;

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

El evento que desea que se active para que se oculte es como tal;

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

Eso muestra un elemento oculto de CSS y, por supuesto, anima lo visual.

En resumen, una solución que cubre las entradas de teclado y mouse cuando un usuario se enfoca en el <option id='blselect'> o las <option class='unselect'> elementos.

<li>
    <select>
        <option class="unselect" selected>Please choose an option..</option>
        <option id="blselect">John</option>
        <option class="unselect">Mike</option>
        <option class="unselect">Barry</option>
        <option class="unselect">Sally</option>
        <option class="unselect">Gertrude</option>
        <option class="unselect">Jill</option>
    </select>
</li>

<li id="hidden">
    <input type="text">
</li>

$("#blselect").click(function() {
    $("#hidden").animate({
        opacity: 'show',
        width: "100%"
    }, 1500);
});

$(".unselect").click(function() {
    $("#hidden").animate({
        opacity: 'hide'
    }, 1500);
});

¿Espero que esta sea información suficiente para que la gente comience? por favor avíseme si necesita más.

Gracias de antemano.

preguntado el 10 de mayo de 11 a las 13:05

4 Respuestas

Como sugirió @Marnix, el .change() el evento es que el correcto incluso para usar aquí. De lo contrario, es posible que esté manejando eventos de mouse o teclado que en realidad no cambiaron el valor en el menú desplegable.

Probablemente desee agregar una ID a la <select>, en cuyo caso el código se vería así:

var $hidden = $('#hidden');

$('#my-select-id').change(function ()
{
    var $option = $(this.options[this.selectedIndex]);
    if ($option.is('#blselect'))
    {
        $hidden.fadeIn(1500);
    }
    else if ($option.is('.unselect'))
    {
        $hidden.fadeOut(1500);
    }
});

contestado el 10 de mayo de 11 a las 18:05

solución perfecta Sr. Ball :) Espero no ser demasiado brusco y preguntar si es posible que el evento .change maneje las pulsaciones de teclas como el cambio y no una pulsación de tecla seguida y la tecla enter / return - celoso

No demasiado bronce, pero no es posible. El evento de cambio se activa cuando el <select> cambios, y eso no sucede con la navegación del teclado hasta que se presiona la tecla Intro. Sin embargo, tiene sentido que sea así. - Matt Ball

Echa un vistazo a la .change() evento. De esta manera, cada cambio en un <select> la etiqueta está registrada. Mire los ejemplos en el página de jQuery para ver cómo funciona.

contestado el 10 de mayo de 11 a las 17:05

Sí, eché un vistazo al evento .change pero reemplazarlo por el evento .click no funcionó, ahora supongo que la forma en que escribirías una función .change difiere de la forma .click. - celoso

Cabe señalar que IE no no es disparar el evento de cambio hasta que un blur() evento ocurre. La solución es hacer algo como esto: $('select').click(function(){this.focus();this.blur();}); - sholsinger

@sholsinger, también para <select>? Desde jQuery: For select boxes, checkboxes, and radio buttons, the event is fired immediately. ¿Tiene una referencia para mí sobre eso? - marnix

Tienes razón, no afecta <select> elementos de la misma manera. Sin embargo, en IE y Opera change() Está despedido cada vez que usa el teclado para cambiar el valor mientras que podrías esperar que solo se dispare cuando confirmar el cambio con las teclas tab o enter. (Como sucede con FF, Chrome y Safari) - sholsinger

Dicho eso, tu enlatado utilizar el click() controlador de eventos para <option> elementos si desea orientarlos a ellos en lugar de a los <select> - sholsinger

Podrías usar .focus() y entonces .blur()

function animateVisualIn(){
  $("#hidden").animate({
    opacity: 'show',
    width: "100%"
  }, 1500);
}
function animateVisualOut(){
  $("#hidden").animate({
    opacity: 'hide'
  }, 1500);
}
$('#blselect, .unselect').focus(animateVisualIn).blur(animateVisualOut);

Puede que haya perdido la marca en este. Pero creo que mi ejemplo muestra una buena práctica que debería acostumbrarse a utilizar. Defina las funciones para que sean reutilizables dentro de su código. Luego, simplemente pase el nombre de la función al método jQuery que acepta una función como argumento. Esto permite la reutilización de sus funciones y evita la pérdida de memoria debido a la transferencia y la redefinición de funciones anónimas.

contestado el 10 de mayo de 11 a las 17:05

El único problema que encontré al probar el evento .focus es que el elemento en cuestión es un el .focus solo se activa cuando lo llama como selector y no funcionará cuando llame a uno de sus elementos secundarios. así que tendría que cambiar el #blselect para seleccionar y luego el script funciona incluso cuando intentas hacer clic en el elemento. - celoso

Muy buenos puntos en sus comentarios editados, haré esto para el futuro. - celoso

También puede usar el método jQuery .keyup (controlador) para ejecutar un controlador.

function show() {

}

function hide() {

}

$("#blselect").click(hide);
$("#blselect").keyup(hide);

contestado el 10 de mayo de 11 a las 17:05

Solo probé su ejemplo, lamentablemente el evento .keyup no funcionará para el elemento, alguna otra idea? - celoso

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.