Selection et desecletion des input

Répondre
Emily
le 24/02/2011 à 07:11
Emily
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:

<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>
LupusMic
le 12/03/2011 à 07:50
LupusMic
Encore une fois, où est la question ?
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Répondre

Ecrire un message

Votre message vient d'être créé avec succès.
LoadingChargement en cours