2015-01-26 3 views
0

То, что я сделал поясню это следующее: Бланк HTML/PHP:JQuery входной динамический контроль

<html> 
 
    \t <head> 
 
    \t \t <link rel="stylesheet" type="text/css" href="gstyle.css"> 
 
    \t </head> 
 
    \t <body> 
 
    \t <script type="text/javascript" src="resources/jquery-1.11.2.min.js"></script> 
 
    \t <script type="text/javascript" src="resources/jquery-ui/jquery-ui.min.js"></script> 
 
    \t <script type="text/javascript" src="script.js"></script> 
 
    \t \t \t <form method="POST"> 
 
    \t \t \t \t <table border=0> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Usuario:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="user" placeholder="Nombre de usuario"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Contraseña: 
 
    \t \t \t \t \t \t <td><input class="campos" type="password" name="passwd" placeholder="Contraseña"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Confirmar contraseña:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="password" name="confpasswd" placeholder="Confirmar Contraseña"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Correo:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="correo" placeholder="E-Mail"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t \t <tr> 
 
    \t \t \t \t \t \t <td class="descripcion">Confirmar correo:</td> 
 
    \t \t \t \t \t \t <td><input class="campos" type="text" name="confcorreo" placeholder="Confirmar E-Mail"></td> 
 
    \t \t \t \t \t </tr> 
 
    \t \t \t \t </table> 
 
    \t \t \t \t <br> 
 
    \t \t \t \t <input class="botones" type="submit" name="send" value="Registrar"> 
 
       </form> 
 
     \t </div> 
 
    \t </body> 
 
    </html>

Это простая regiter формульный, с классами CSS. Тогда у меня есть CSS лист с текущими стилями и также правильные и неправильные классы готовы к JQuery:

#form { 
 
    \t font-family: Tahoma; 
 
    \t font-size: 20px; 
 
    \t margin-top: 200px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t padding: 20px 10px 20px 50px; 
 
    \t width: 700px; 
 
    \t text-align: center; 
 
    \t border-radius: 5px; 
 
    \t background: url("imagenes/div_fondo.jpg"); 
 
    \t background-size: cover; 
 
    \t background-position: center center; 
 
    \t background-repeat: no-repeat; 
 
    \t background-attachment:fixed; 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    } 
 

 
    #head { 
 
    \t color: white; 
 
    \t font-family: Tahoma; 
 
    \t font-size: 20px; 
 
    \t margin-top: 20px; 
 
    \t margin-left: auto; 
 
    \t margin-right: auto; 
 
    \t padding: 10px 0px 10px 0px; 
 
    \t width: 1500px; 
 
    \t text-align: center; 
 
    \t border-radius: 5px; 
 
    \t background: url("imagenes/div_fondo.jpg"); 
 
    \t background-size: cover; 
 
    \t background-position: center center; 
 
    \t background-repeat: no-repeat; 
 
    \t background-attachment:fixed; 
 
    \t text-shadow: 0px 0px 15px #2222FF; 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    } 
 

 
    td { 
 
    \t padding-top: 15px; 
 
    } 
 

 
    #titulo{ 
 
    \t text-shadow: 0px 0px 8px #2222FF; 
 
    \t line-height: 5px; 
 
    \t color: white; 
 
    } 
 

 
    .descripcion{ 
 
    \t text-shadow: 0px 0px 8px #2222FF; 
 
    \t color: white; 
 
    \t text-align:right; 
 
    \t font-size: 20px; 
 
    } 
 

 
    .campos{ 
 
    \t -webkit-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
    \t -moz-box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
    \t box-shadow: inset 3px 3px 3px 0px rgba(0,0,0,0.78); 
 
     height: 40px; 
 
     margin: 15px; 
 
     padding: 12px; 
 
     width: 300px; 
 
     font-size: 18px; 
 
     border: 0; 
 
    \t border-radius: 3px; 
 
    } 
 

 
    .campos:focus { 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(36,160,255,1); 
 
    } 
 

 
    .correcto{ 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(0,255,81,1); 
 
    } 
 

 
    .incorrecto{ 
 
    \t -webkit-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    \t -moz-box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    \t box-shadow: 0px 0px 13px 6px rgba(255,0,0,1); 
 
    } 
 

 
    .botones { 
 
    \t -webkit-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t -moz-box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.8); 
 
    \t background-color:#7C1919; 
 
    \t width: 250px; 
 
    \t height: 50px; 
 
    \t border: 0; 
 
    \t font-size: 20px; 
 
    }
и скрипт JQuery, который Цель СССР является оценить несколько входов, а затем добавить класс в вход для информирования пользователя о том, что он правильный или нет, но я хочу, чтобы он был динамическим, я имею в виду, чтобы постоянно оценивать входной сигнал без подзарядки страницы.

$(document).ready(function(){ 
 
    \t var user = $("input[name=user]").val(); 
 
    \t if(user === "Vitama") { 
 
    \t \t $("input[name=user]").addClass("correcto"); 
 
    \t } 
 
    });

Я suposed этот сценарий будет делать эту вещь, но я был неправ. Некоторая помощь, пожалуйста, как я могу сделать ее динамичной ?.

+0

Что вопрос? Какая у вас проблема? Хорошо, что вы разместили свой код, но вы недостаточно объясняете проблему. – j08691

+0

Проблема заключалась в том, что я предположил, что то, что я сделал, сделает живую динамическую компоновку, но это было не так, мне нужно было перезагрузить страницу для проверки. – Vitama

ответ

1

Похоже, что вы ищете что-то вроде функции .keyup в jQuery. Он оценивает состояние при его вводе.

Я также добавил ключевое слово !important в атрибуты «correcto», чтобы они перезаписывали атрибуты :focus.

var user; 
 
$("input[name=user]").keyup(function() { 
 
    user = $("input[name=user]").val(); 
 
    if (user === "Vitama") { 
 
    $("input[name=user]").addClass("correcto"); 
 
    } 
 
});
#form { 
 
    font-family: Tahoma; 
 
    font-size: 20px; 
 
    margin-top: 200px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 20px 10px 20px 50px; 
 
    width: 700px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: url("imagenes/div_fondo.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
} 
 
#head { 
 
    color: white; 
 
    font-family: Tahoma; 
 
    font-size: 20px; 
 
    margin-top: 20px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding: 10px 0px 10px 0px; 
 
    width: 1500px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background: url("imagenes/div_fondo.jpg"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    text-shadow: 0px 0px 15px #2222FF; 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
} 
 
td { 
 
    padding-top: 15px; 
 
} 
 
#titulo { 
 
    text-shadow: 0px 0px 8px #2222FF; 
 
    line-height: 5px; 
 
    color: white; 
 
} 
 
.descripcion { 
 
    text-shadow: 0px 0px 8px #2222FF; 
 
    color: white; 
 
    text-align: right; 
 
    font-size: 20px; 
 
} 
 
.campos { 
 
    -webkit-box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    -moz-box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    box-shadow: inset 3px 3px 3px 0px rgba(0, 0, 0, 0.78); 
 
    height: 40px; 
 
    margin: 15px; 
 
    padding: 12px; 
 
    width: 300px; 
 
    font-size: 18px; 
 
    border: 0; 
 
    border-radius: 3px; 
 
} 
 
.campos:focus { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
    box-shadow: 0px 0px 13px 6px rgba(36, 160, 255, 1); 
 
} 
 
.correcto { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
    box-shadow: 0px 0px 13px 6px rgba(0, 255, 81, 1)!important; 
 
} 
 
.incorrecto { 
 
    -webkit-box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
    -moz-box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
    box-shadow: 0px 0px 13px 6px rgba(255, 0, 0, 1); 
 
} 
 
.botones { 
 
    -webkit-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    -moz-box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.8); 
 
    background-color: #7C1919; 
 
    width: 250px; 
 
    height: 50px; 
 
    border: 0; 
 
    font-size: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<body> 
 
    <form method="POST"> 
 
    <table border=0> 
 
     <tr> 
 
     <td class="descripcion">Usuario:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="user" placeholder="Nombre de usuario"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Contraseña: 
 
      <td> 
 
      <input class="campos" type="password" name="passwd" placeholder="Contraseña"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Confirmar contraseña:</td> 
 
     <td> 
 
      <input class="campos" type="password" name="confpasswd" placeholder="Confirmar Contraseña"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Correo:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="correo" placeholder="E-Mail"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="descripcion">Confirmar correo:</td> 
 
     <td> 
 
      <input class="campos" type="text" name="confcorreo" placeholder="Confirmar E-Mail"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <br> 
 
    <input class="botones" type="submit" name="send" value="Registrar"> 
 
    </form> 
 
    </div> 
 
</body>

Смежные вопросы