Tengo un campo de entrada, que se utiliza para realizar algunos cálculos. Hay 2 botones en los que el usuario puede hacer clic para indicar qué conjunto de cálculos le gustaría realizar. Sin embargo, en caso de que el usuario no haga clic en ninguno de los botones, quiero que se realice una acción predeterminada:

function button1Clicked() {
    alert('button 1 clicked');
}
function button2Clicked() {
    alert('button 2 clicked');
}
function noButtonClicked() {
    alert('no button was clicked');
}

Mis campos se parecen a esto:

<input type="text" id="inpt1" onchange="noButtonClicked();" />
<input type="submit" id="btn1" onclick="button1Clicked();" />
<input type="submit" id="btn2" onclick="button2Clicked();" />

Puedo obtener la acción de los botones para ejecutar como se describe en esta pregunta, pero no es confiable. ¿Existe una solución más simple para bloquear el evento onchange cuando se hace clic en uno de estos botones?

Para aclarar : cuando el usuario haya terminado de editar el campo de entrada, si no se hace clic en ningún botón, ejecute noButtonClicked(). Si se hace clic en uno de los botones, ejecute la función asociada con el botón, pero no la función noButtonClicked().

2
Elie 3 sep. 2014 a las 20:27

3 respuestas

La mejor respuesta

Ok, entiendo tu problema ahora. No tiene forma de interrumpir el evento de desenfoque. Esto es axiomático, desafortunadamente. Aquí hay una solución probada que esencialmente no es diferente de la respuesta a la que se vinculó, excepto una leve diferencia en la estructura ...

var queue = null;

function checkInput(elem){
    if(elem.id == 'inpt1')
    {
        clearTimeout(queue);
        queue = setTimeout(runDefault, 500);
    }
    else if(elem.id == 'btn1')
    {
        clearTimeout(queue);
        runButton1();
    }
    else
    {
        clearTimeout(queue);
        runButton2();
    }
}

function runDefault()
{
    alert('default');
}

function runButton1()
{
    alert('Button 1');   
}

function runButton2()
{
    alert('Button 2');   
}

Y solo cambió que todos los oyentes apuntan a la misma función de control:

<input type="text" id="inpt1" onblur="checkInput(this);" />
<input type="submit" id="btn1" onclick="checkInput(this);" />
<input type="submit" id="btn2" onclick="checkInput(this);" />

Básicamente se trata de configurar la función de devolución de llamada en una cola de tiempo de espera y hacer que cada oyente limpie la cola. 500 ms es lo suficientemente largo para que se borre cualquier evento, pero sí, sigue siendo un punto de poca confiabilidad. Sin embargo, tal vez esté dentro de un umbral tolerable para usted. Tú decides.

* actualizado para ajustar el comentario de OP sobre los botones de cola 1 y 2

1
Kai Qing 3 sep. 2014 a las 17:24

Lo habría configurado un poco diferente. Usando jQuery:

$('#inpt1').change(function(event){ 
alert('change event');
});

$('#btn1').click(function(event){ 
    alert('button 1 click');
    event.preventDefault();
});

$('#btn2').click(function(event){ 
    alert('button 2 click');
    event.preventDefault();
});

HTML:

<input type="text" id="inpt1" name="inpt1" />
<input type="submit" id="btn1" value="Submit" />
<input type="submit" id="btn2" value="Submit" />

Además, el evento change () para su entrada de texto solo se activará después de que el usuario deje la entrada (desenfoque). Si desea realizar un seguimiento de un cambio, podría sugerir pulsación de tecla o evento de pulsación de tecla.

¡Espero que esto ayude!

JSFiddle

0
Community 23 may. 2017 a las 12:12

Prefiero usar jQuery

$("#btn1").click(function(e){
    e.preventDefault();
    alert('button 1 clicked');
});

$("#btn2").click(function(e){
     e.preventDefault();
 alert('button 2 clicked');
});
// you may want to use blur event, rather than change event
$("#inpt1").change(function(){
     alert('no button was clicked');
});

http://jsfiddle.net/habo/ukz37ztc/1/

0
HaBo 3 sep. 2014 a las 16:32