Tengo una página HTML que envía una solicitud cada 5 segundos. ¿Cómo puedo deshabilitar o atenuar el a href en setTimeoutFunction antes de que se envíe el formulario?
<html lang="en"> <head> <META content="text/html; charset=utf-8" http-equiv="Content-Type"/> <META name="viewport" content="width=device-width"/> <script> setTimeout(function () { // disable <a> document.forms.form.submit(); }, 5000); </script> </head> <body> <section class="wrapper"> <section class="container"> <section class="content"> <h1>Title</h1> <p>Description</p> </section> <form id="form" method="post" action="http://toawebsitepost.com"> <input type="submit" hidden> </form> <a class="cancel" href="http://toawebsite.com">Cancel</a> </section> </section> </body> </html>Como señaló CBroe, no es bueno simplemente configurar pointer-events en none cuando aún se puede acceder al ancla mediante el teclado.
En su lugar, podría agregar un detector de clics al ancla. Cuando se ejecuta la devolución de llamada setTimeout , cambia una variable llamada isDisabled a verdadera. Si se hace clic en el botón antes del tiempo de espera, el controlador (en este caso) registra un mensaje; de lo contrario, usamos preventDefault para detener el comportamiento normal del ancla.
const cancel = document.querySelector('.cancel'); cancel.addEventListener('click', handleClick, false); let isDisabled = false; function handleClick(e) { if (isDisabled) { e.preventDefault(); } else { // Normally you would be navigating // to a website, but in this example // we're just logging a message console.log(`Navigating to ${e.target.href}`); } } setTimeout(function() { isDisabled = true; cancel.classList.add('disabled'); document.forms.form.submit(); }, 5000); .disabled { color: #ababab; cursor: not-allowed; } <section class="wrapper"> <section class="container"> <section class="content"> <h1>Title</h1> <p>Description</p> </section> <form id="form" method="post" action="http://toawebsitepost.com"> <input type="submit" hidden> </form> <a class="cancel" href="http://toawebsite.com">Cancel</a> </section> </section>Puede eliminar su etiqueta y utilizarla en su lugar. Usando el botón:
<section class="wrapper"> <section class="container"> <section class="content"> <h1>Title</h1> <p>Description</p> </section> <form id="form" method="post" action="http://toawebsitepost.com"> <input type="submit" hidden> </form> <button class="cancel" onclick="navigateToUrl()">Cancel</button> </section> </section>JS:
navigateToUrl() { window.location.href = "http://toawebsite.com" } setTimeout(function () { // disable <a> const button = document.querySelector('.cancel')[0]; button.disabled = true; document.forms.form.submit(); }, 5000); O si desea apegarse a <a> , agregue una clase CSS personalizada para evitar clics:
setTimeout(function () { // disable <a> const aTag = document.querySelector('.cancel')[0]; aTag.classList.add('disable'); document.forms.form.submit(); }, 5000);CSS:
.disable { pointer-events: none; color: grey; }Puede agregar una clase CSS especial que eliminará el comportamiento predeterminado de un enlace. Por favor revise el ejemplo:
setTimeout(function () { // disable <a> document.querySelector('.cancel').classList.add('disabled'); document.forms.form.submit(); document.querySelector('.cancel').classList.remove('disabled'); }, 5000); .disabled { pointer-events: none; } <section class="wrapper"> <section class="container"> <section class="content"> <h1>Title</h1> <p>Description</p> </section> <form id="form" method="post" action=""> <input type="submit" hidden> </form> <a class="cancel" href="http://toawebsite.com">Cancel</a> </section> </section>