mostrar el botón X solo cuando se ingresa texto en el cuadro de texto

Estoy usando el complemento disponible. aquí para eliminar el texto en el cuadro de texto haciendo clic en el botón X. ¿Cómo modifico el código para que el botón X aparezca solo cuando se ingresa texto en el cuadro de texto? Intenté establecer una condición en el estado de retorno en el código JavaScript: if ($('#search').val().length != 0) pero no funcionó. Aquí está el código que probé:

$(document).ready(function(){
    if ($('#search').val().length != 0){
        $('#search').clearable();
        $('.divclearable').show();
    }
    else{
        $('.divclearable').hide();
    }
});

Cualquier ayuda sería muy apreciada.

preguntado el 27 de julio de 12 a las 17:07

4 Respuestas

Agrega una keyup oyente -

$(function () {
    $("#search").on("keyup", function() {
        if ($('#search').val().length != 0){
            $('#search').clearable();
            $('.divclearable').show();
        }
        else{
            $('.divclearable').hide();
        }
    });
});

Respondido 15 Jul 13, 20:07

@Archer Yo tampoco lo entiendo, sería genial una explicación del votante negativo. Pero eso a veces sucede :) - Zoltán Toth

Creo que fue el tipo herido en el trasero el que eliminó su respuesta porque se señaló que estaba equivocada. - Reincorporar a Monica Cellio

@ZoltanToth: su respuesta parece prometedora, pero desafortunadamente, no funcionó para mí. Aquí está mi código completo: gist.github.com/dc59408990ebbf17f2d6 - raul desai

@rad no cerró todos sus paréntesis en el JS, tampoco hay cierre </input> etiqueta - jsfiddle.net/xeadw - Zoltán Toth

@ZoltanToth, solucioné los errores que mencionaste. Ahora, el botón aparece cuando ingreso algo en el cuadro de texto por primera vez, cuando hago clic en él, el botón no desaparece. Y, cuando vuelvo a introducir texto, se añade otro botón X al anterior. - raul desai

Mirando el CSS, parece que el botón es parte del clearlink clase.

Simplemente harías $("a.clearlink").hide() para ocultarlo.

Esto manejará eventos que no sean simples pulsaciones de teclas.:

$('.divclearable > input').change(
    function() 
    {
        if($(this).val().length == 0)
           $(this).closest('a.clearlink').hide();
        else
           $(this).closest('a.clearlink').show();
    }
);

Respondido 27 Jul 12, 17:07

¿Por qué $('.divclearable').change? No quieres decir $('.#search').change, similar a la respuesta a continuación de hace 5 minutos? - Reincorporar a Monica Cellio

@Archer Porque el CSS en la página del complemento enumera eso como el nombre de la clase, lo que haría que esta función se aplicara a todos los controles borrables. También estoy teniendo en cuenta eventos como el corte, que despejaría la caja sin usar un evento keyup. - alex w

Pero el evento de cambio no ocurre en el div envuelto, ocurre en la entrada Editar: Sí, tú también lo detectaste y lo arreglaste :) - Reincorporar a Monica Cellio

No estoy seguro de si el evento de cambio de jquery se activa cuando javascript cambia el texto de un elemento.

Es posible que desee adjuntar un evento de clic al botón Borrar para que se oculte además de borrar el texto. Sin embargo, no estoy seguro de si esto entra en conflicto con el controlador de eventos de la biblioteca que está utilizando...

$("#search").change(check_input);
$('.divclearable').click(check_input);
check_input = function(){
    if ($('#search').val().length != 0){
        $('#search').clearable();
        $('.divclearable').show();
    }
    else{
        $('.divclearable').hide();
    }
};

Respondido 27 Jul 12, 17:07

Hablaré contigo sobre la lógica, debes hacer tu propia implementación: hay una clase css llamada "clearlink" que muestra el botón de cerrar. modifíquelo y configure los valores iniciales para que sean: mostrar: ninguno, luego en su código Jquery cuando detecte un cambio de longitud, proporcione el cambio de método mostrar: ninguno para bloquear. o haga una copia de clearlink como clearlink1 y cambie el nombre de clase del elemento.

Simplemente use la función de inspección de elementos en su navegador.

Respondido 27 Jul 12, 17:07

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