0
160
Viewshtml formulario de estilo moviendo la línea idk cómo arreglar eso es que alguien me puede dar un consejo?
Estoy agregando un mensaje al lado derecho del cuadro de entrada usando span/span y cuando ejecuto estos códigos funciona bien, pero cuando ingreso las contraseñas, la línea Confirmar contraseña se mueve hacia el lado izquierdo. ¿Hay alguna manera de arreglar eso?
Gracias por su interés.
Antes: 
Después: 
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery.min.js"></script> <title>Document</title> <style> body{background-color: black; color: darkgreen;} form{text-align: center;} ::placeholder{ color: red; opacity: 0.5; } </style> </head> <body> <form> <p id="firstname">First name</p> <input type="text" id="firstnameInput"> <p id="lastname">Last name</p> <input type="text" id="lastnameInput"> <p id="email">E-mail</p> <input type="text" id="emailInput"> <p>Password</p> <input type="password" id="password" onkeyup="check()" required> <p>Confirm password</p> <input type="password" id="confirm_password" onkeyup="check()" required> <span id='message'></span> <br><br> <input type="button" id="send" value="Send"> </form> <script> var check = function() { if (document.getElementById('password').value == document.getElementById('confirm_password').value) { document.getElementById('message').style.color = 'green'; document.getElementById('message').innerHTML = 'Matching'; } else { document.getElementById('message').style.color = 'red'; document.getElementById('message').innerHTML = 'Not matching'; } }; </script> </body> </html>2 answers
Answer question0
En general, es mejor ajustar las clases de elementos DOM y proporcionar estilos para que coincidan con esas clases, en lugar de manipular los estilos directamente.
Además, una vez que haga un querySelector, si está haciendo más de una cosa con el elemento, debe guardar el resultado, en lugar de volver a consultar.
TBH, no estoy seguro de cuál de estas cosas hizo que funcionara, pero ya no veo el comportamiento de extrema izquierda.
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery.min.js"></script> <title>Document</title> <style> body{background-color: black; color: darkgreen;} form{text-align: center;} .valid { color: green; } .invalid { color: red; } ::placeholder{ color: red; opacity: 0.5; } </style> </head> <body> <form> <p id="firstname">First name</p> <input type="text" id="firstnameInput"> <p id="lastname">Last name</p> <input type="text" id="lastnameInput"> <p id="email">E-mail</p> <input type="text" id="emailInput"> <p>Password</p> <input type="password" id="password" onkeyup="check()" required> <p>Confirm password</p> <input type="password" id="confirm_password" onkeyup="check()" required> <span id='message'></span> <br><br> <input type="button" id="send" value="Send"> </form> <script> var check = function() { let message = document.getElementById('message'); if (document.getElementById('password').value == document.getElementById('confirm_password').value) { message.classList.add('valid'); message.classList.remove('invalid'); message.innerHTML = 'Matching'; } else { message.classList.add('invalid'); message.classList.remove('valid'); message.innerHTML = 'Not matching'; } }; </script> </body> </html>0
Tu problema radica aquí <span id='message'></span> .
<span> es un elemento en línea. significa que siempre intentará encajar en la misma línea.
¡Use un elemento de nivel de bloque como <div> o <p> en lugar de span y su problema se resolverá!