Estoy tratando de crear un formulario que se enviará con una presión prolongada (actualmente 2 segundos) pero que pueda cancelar (o evitar enviar el formulario) cuando el usuario deja de presionar el botón Enviar para darle tiempo al usuario para cambiar de opinión acerca de enviar el formulario forma.
function conf_submit(btn) { $(btn).mousedown(function() { btn_timeout = setTimeout(function() { alert("form submitted"); }, 2000); $(this).val("Release to cancel!"); $(this).attr('class', 'btn_down'); }); $(btn).mouseup(function() { clearTimeout(btn_timeout); $(this).val("Submit"); $(this).attr('class', 'btn_up'); }); }Se supone que el botón cambia el texto, quería tener una cuenta regresiva después de '¡Liberar para cancelar!' para que el usuario sepa cuánto tiempo hasta que se envíe el formulario, pero no pudo hacer que esto funcione.
Mi problema es; La primera vez que hace clic en el enlace, no se activa, también continúa activando incluso con el mouse hacia arriba.
Gracias de antemano por cualquier apoyo.
Simplemente llame a conf_submit una vez con el elemento de botón cuando se cargue la página, no cada vez que se haga clic en el botón.
function conf_submit(btn) { $(btn).mousedown(function() { btn_timeout = setTimeout(function() { alert("form submitted"); }, 2000); $(this).val("Release to cancel!"); $(this).attr('class', 'btn_down'); }); $(btn).mouseup(function() { clearTimeout(btn_timeout); $(this).val("Submit"); $(this).attr('class', 'btn_up'); }); } [...document.querySelectorAll(".btn_longpress")].forEach(conf_submit); .btn_down { background-color: red; } .btn_up { background-color: blue; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <input class="btn_up btn_longpress" type="button" value="Submit" /> <input class="btn_up btn_longpress" type="button" value="Submit2" /> </div>