le 24/02/2011 à 07:11
Selection et desecletion des input
Bonjour,
Je voudrais dans mon formulaire effectuer les operations suivantes:
+ Quand on mets la souris a un input:
* Il affiche un message des instructions,
* Il change la couleur de l'input selectionne ainsi que de la div
+ Quand on enleve la souris du input:
* Il doit tous desactive (les operations precedentes)
ou bien, si il enleve la souris et selectionne un autre input:
* Il doit desactiver les operations de l'input deja secletionne, et les affecter au input recemment selectionne.
Voila mon code:
Je voudrais dans mon formulaire effectuer les operations suivantes:
+ Quand on mets la souris a un input:
* Il affiche un message des instructions,
* Il change la couleur de l'input selectionne ainsi que de la div
+ Quand on enleve la souris du input:
* Il doit tous desactive (les operations precedentes)
ou bien, si il enleve la souris et selectionne un autre input:
* Il doit desactiver les operations de l'input deja secletionne, et les affecter au input recemment selectionne.
Voila mon code:
<html>
<head>
<style type="text/css">
#name, #username, #email {
border-color: #FF0000;
border-style: solid;
border-width: 1px;
border-collapse: collapse;
}
#label01 {
width: 100px;
display:block;
float: right;
}
.frm_fields {
padding: 5px;
}
input:focus {
background: #fc9fff;
}
.CurFocus {
background: #fdecb2;
width: 400px;
}
#msgbox {
display: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#frm_login input").focus(function(){ // quand on met la souris au input de la form frm_login
$(this).parent().addClass('CurFocus'); // on ajoute le CurFocus a frm_fields afin de combiner les 2 class
$("#msgbox").fadeIn("normal").html('<img src="info.png" width="20" height="20" align="absmiddle"> Les instructions ici');
return false;
});
$("#frm_login input").blur(function(){ // quand on releve la souris
$(this).parent().removeClass('CurFocus'); // on peut mettre removeClass() pr eliminer toutes les class
$("#msgbox").fadeOut("normal");
return false;
});
});
</script>
</head>
<body>
<?php
include 'site_vars.php';
echo '<form name="frm_login" id="frm_login" action="#" method="POST">';
echo '<div class="frm_fields">';
echo '<label for="name" id="label01">'.$name_var.'</label>';
echo $name_input;
echo '<span id="msgbox"></span>';
echo '</div>';
echo '<div class="frm_fields">';
echo '<label for="username" id="label01">'.$username_var.'</label>';
echo $username_input;
echo '<span id="msgbox"></span>';
echo '</div>';
echo '<div class="frm_fields">';
echo '<label for="email" id="label01">'.$email_var.'</label>';
echo $email_input;
echo '<span id="msgbox"></span>';
echo '</div>';
echo '</div>';
echo $submit_var;
echo '</form>';
?>
</body>
</html>
