El formulario de inicio de sesión de Javascript no se envía cuando el usuario presiona Enter

Question

Estoy trabajando en un simple inicio de sesión de JavaScript para un sitio, y se me ocurrió esto:

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

... que funciona excepto por una cosa: presionar enter para enviar el formulario no hace nada. Tengo la sensación de que es porque he usado & Quot; onclick & Quot; pero no estoy seguro de qué usar en su lugar. Pensamientos?

---

Bien, sí, así que soy muy consciente de lo endeble que es esto en cuanto a seguridad. No es para nada particularmente secreto, por lo que no es un gran problema, pero si ustedes pudieran elaborar sus pensamientos con código, me encantaría ver sus ideas. el código que enumeré es, literalmente, todo lo que estoy trabajando en este momento, por lo que puedo comenzar desde cero si es necesario.

Answer 1

Aquí se discuten varios temas a la vez. Tratemos de aclarar.

1. Su preocupación inmediata:

( ¿Por qué el botón de entrada no funciona cuando se presiona ENTER? )

Utilice el tipo de botón enviar .

<input type="submit".../> 

..en lugar de

<input type="button".../>

Su problema realmente no tiene nada que ver con haber utilizado un atributo onclick . En cambio, no está obteniendo el comportamiento que desea porque ha utilizado el tipo de entrada button , que simplemente no se comporta de la misma manera que los botones de envío.

En HTML y XHTML, hay comportamientos predeterminados para ciertos elementos. Los botones de entrada en los formularios suelen ser de tipo & Quot; submit & Quot ;. En la mayoría de los navegadores, & Quot; submit & Quot; los botones se activan por defecto cuando se presiona ENTRAR desde un elemento enfocado en el mismo elemento de formulario . El & Quot; botón & Quot; tipo de entrada no. Si desea aprovechar ese comportamiento predeterminado, puede cambiar su tipo de entrada a & Quot; submit & Quot ;.

Por ejemplo:

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. Problemas de seguridad:

@Ady mencionó un problema de seguridad. Hay una gran cantidad de problemas de seguridad asociados con hacer un inicio de sesión en javascript . Probablemente se encuentren fuera del dominio de esta pregunta , especialmente porque ha indicado que no está particularmente preocupado por ello, y el hecho de que su método de inicio de sesión en realidad solo estaba configurando la ubicación. una nueva página html (que indica que probablemente no tenga ningún mecanismo de seguridad real).

En lugar de dilucidar eso, aquí hay enlaces a temas relacionados en SO, si alguien está interesado en esas preguntas directamente.

• ¿Está ahí? de alguna manera puedo hacer una validación de usuario del lado del cliente?
• Cifrado de llamadas Ajax para autenticación en jQuery

3. Otros problemas:

Aquí hay una limpieza rápida de su código, que solo sigue algunas de las mejores prácticas. No aborda la preocupación de seguridad que la gente ha mencionado. En cambio, lo incluyo simplemente para ilustrar algunos hábitos saludables . Si tiene preguntas específicas sobre por qué he escrito algo de cierta manera, no dude en preguntar. Además, explore la pila de temas relacionados (ya que su pregunta puede haber sido discutida aquí).

Lo principal a tener en cuenta es la eliminación de los atributos del evento (onclick = " " ;, onsubmit = " " ;, o onkeypress = " ") del HTML. Esos pertenecen a JavaScript, y se considera una buena práctica mantener los eventos de JavaScript fuera del marcado.

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>

Answer 2

En lugar de < input type = " button " > ;, use < input type = " submit " > ;. Puede poner su código de validación en su formulario en el controlador de envío:

< id de formulario = " loginwindow " onsubmit = " validar (...) " >

Answer 3

es porque no es un envío de formulario, por lo que no hay ningún evento que se active cuando el usuario presiona enter. Una alternativa a las opciones de envío de formularios anteriores sería agregar un detector de eventos para que el formulario de entrada detecte si el usuario presionó enter.

<input type="password" name="text1" onkeypress="detectKey(event)">

Answer 4

Coloque el script directamente en su documento html. Cambie el valor de onclick con la función que desea usar. El script en html le indicará al formulario que se envíe cuando el usuario presione enter o presione el botón de enviar.

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>

Answer 5

Quizás puedas probar esto:

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

Como otros han señalado, hay otros problemas con su solución. Pero esto debería responder a su pregunta.

Answer 6

Seguramente esto es demasiado inseguro ya que todos pueden resolverlo en un segundo ...

- la única forma pseudosegura de hacer js-logins es similar:

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>

Answer 7

My Thought = Gran agujero de seguridad. Cualquiera puede ver el nombre de usuario y la contraseña.

Más relevante para su pregunta: - Tiene dos eventos sucediendo.

1. El usuario hace clic en el botón.
2. El usuario presiona enter.

La tecla Intro envía el formulario, pero no hace clic en el botón.

Al colocar su código en el método de envío del formulario, el código se ejecutará cuando se envíe el formulario. Al cambiar el tipo de entrada del botón para enviar, el botón enviará el formulario de la misma manera que lo hace el botón Intro.

Su código se ejecutará para ambos eventos.