Tengo un pequeño script que alterna un botón entre deshabilitado y no dependiendo del valor de la entrada de un número. Funciona exactamente como lo esperaría cuando el activador del evento es input.onchange, pero no parece funcionar si trato de hacer que el evento button.onmouseover.
Esto funciona:
<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input onchange="myFunction()" type="number" id="quantity" name="quantity" min="1" max="5"> <input disabled id="submit" type="submit"> <p id="number"></p> </form> <script> function myFunction() { var x = document.getElementById("quantity"); var y = document.getElementById("submit"); if (x.value >= "5") { y.toggleAttribute("disabled"); } else if (y.hasAttribute("disabled") == false) { y.toggleAttribute("disabled"); } } </script>Esto no lo hace:
<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> <input onmouseover="myFunction()" disabled id="submit" type="submit"> <p id="number"></p> </form> <script> function myFunction() { var x = document.getElementById("quantity"); var y = document.getElementById("submit"); if (x.value >= "5") { y.toggleAttribute("disabled"); } else if (y.hasAttribute("disabled") == false) { y.toggleAttribute("disabled"); } } </script>Si elimino el atributo deshabilitado inicial del botón, mi otro si alternar funciona, pero el primero si nunca lo desactiva. ¿Hay algo en onmouseover que le impide verificar el valor de la cantidad?
En HTML, los elementos deshabilitados no activan eventos, no puede pasar el mouse sobre ellos ni hacer clic en ellos. Puede envolver dicho elemento dentro de un div y pasar el mouse sobre ese div. Aquí está el código:
<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> <div style="display: inline;padding: 10px;" id="wrapper_submit"> <input disabled id="submit" type="submit"> </div> <p id="number"></p> </form> <script> // After page load window.onload = function(){ // Get div and on its mouseover document.getElementById("wrapper_submit").onmouseover = function(){ var x = document.getElementById("quantity"); var y = document.getElementById("submit"); if (x.value > "5") y.disabled = true; else if(x.value >= "1") y.disabled = false; } } </script>Editar: el evento Mouseover solo se activa cuando el cursor está sobre el elemento en sí mismo, no se activará si el elemento secundario cubre al padre. En el caso anterior, si elimina el relleno de [Div('wrapper_submit')], el evento de mouseover no funcionará. Use el evento de entrada del mouse, funciona incluso si el niño cubre al padre al 100%.
document.getElementById("wrapper_submit").onmouseenter = function(){ var x = document.getElementById("quantity"); var y = document.getElementById("submit"); if (x.value > "5") y.disabled = true; else if(x.value >= "1") y.disabled = false; }Sucede porque su entrada está deshabilitada y no reacciona Pruebe este código y avíseme si le funciona
<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> <input onmouseover="myFunction()" disabled id="submit" type="submit"> <p id="number"></p> document.getElementById("quantity").onmouseover = function() {myFunction()}; function myFunction() { var x = document.getElementById("quantity"); var y = document.getElementById("submit"); if (x.value < "5" ) { y.removeAttribute("disabled"); }else if (x.value>= "5") { y.toggleAttribute("disabled"); } else if (y.hasAttribute("disabled") == false) { y.toggleAttribute("disabled"); } }