begin process at 2012 05 28 13:01:24
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > CLAVIER NUMERIQUE SECURISÉ

CLAVIER NUMERIQUE SECURISÉ


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :login, passe, password, connection, securite Niveau :Débutant Date de création :04/05/2010 Date de mise à jour :14/03/2011 12:57:20 Vu / téléchargé :3 994 / 389

Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
il s'agit d'un clavier numerique ou la disposition des touches change a chaque chargement plus une deuxieme securite afin d'eviter les logiciels espions qui enregistre les touche tapé au clavier car il faut rester sur le bouton sans appuyer pour valider la frappe

compatible ff chrome opera et IE a partir de IE6

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <style type="text/css">
  • body{
  • font-family:Verdana, Geneva, sans-serif;
  • background-color:gray;
  • }
  • .sgen{
  • background:url(metal.jpg);
  • height:200px;width:250px;
  • margin:auto;
  • margin-top:100px;
  • border-style:solid;
  • }
  • .sgen ul li{
  • float:left;
  • list-style:none;
  • padding:5px;
  • color:blue;
  • position:relative;
  • left:14px;
  • }
  • .sgen ul li div{
  • height:30px;
  • width:60px;
  • text-align:center;
  • font-size:13px;
  • font-weight:bold;
  • line-height:25px;
  • background:url(sbouton.png);
  • }
  • .sgen ul li:hover{
  • color:red;
  • }
  • #secuid10{
  • display:block;
  • margin:auto;
  • width:130px;
  • text-align: center;
  • }
  • .divimage{
  • cursor:pointer;
  • text-align:center;
  • font-weight:bold;
  • color:blue;
  • font-size:14px;
  • height:40px;
  • width:40px;
  • background:url(bout.png);
  • }
  • .divimage:hover{
  • opacity:0.7;
  • }
  • #secure{
  • margin:10px auto;
  • }
  • </style>
  • <script>
  • tbimage=new Array(1,2,3,4,5,6,7,8,9,0)
  • function securi(){
  • document.getElementById('secuid10').value=''
  • var allElements = document.getElementById('secure').getElementsByTagName('td');
  • for (var i = 0; i< allElements.length; i++){
  • if(tbimage.length==1){
  • allElements[i].firstChild.nodeValue=tbimage[0]
  • }
  • else{
  • var spl=Math.round(Math.random()*(tbimage.length-1))
  • allElements[i].firstChild.nodeValue=tbimage[spl]
  • tbimage.splice(spl,1)
  • }
  • var dd='secuid'+i+''
  • allElements[i].id=dd
  • allElements[i].onmouseover=function(event){parde(event)};
  • allElements[i].onmouseout=finparde
  • }
  • }
  • function inval(lui){
  • var obja=document.getElementById('secuid10')
  • obja.value=obja.value+document.getElementById(lui).firstChild.nodeValue
  • }
  • function parde(lui){
  • var di=(navigator.appName.substring(0,3)=="Mic") ? event.srcElement.id : lui.currentTarget.id
  • terin=setTimeout("inval('"+di+"')",1000)
  • }
  • function finparde(){
  • clearTimeout(terin)
  • }
  • function roze(){
  • document.getElementById("secuid10").value=''
  • }
  • </script>
  • </head>
  • <body onload='securi()'>
  • <div class='sgen'>
  • <table id='secure'>
  • <tr>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • </tr><tr>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • <td class='divimage'>titre</td>
  • </tr>
  • </table>
  • <input type='password' readonly='true' id='secuid10'/>
  • <ul>
  • <li><div onclick='roze()'>annuler</div></li>
  • <li><div>valider</div></li>
  • </ul>
  • <div>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">

body{
font-family:Verdana, Geneva, sans-serif;
background-color:gray;
}

.sgen{
background:url(metal.jpg);
height:200px;width:250px;
margin:auto;
margin-top:100px;
border-style:solid;
}

.sgen ul li{
float:left;
list-style:none;
padding:5px;
color:blue;
position:relative;
left:14px;
}

.sgen ul li div{
height:30px;
width:60px;
text-align:center;
font-size:13px;
font-weight:bold;
line-height:25px;
background:url(sbouton.png);
}

.sgen ul li:hover{
color:red;
}

#secuid10{
display:block;
margin:auto;
width:130px;
text-align: center;
}

.divimage{
cursor:pointer;
text-align:center;
font-weight:bold;
color:blue;
font-size:14px;
height:40px;
width:40px;
background:url(bout.png);

}

.divimage:hover{
opacity:0.7;
}

#secure{
margin:10px auto;
}

</style>

<script>

tbimage=new Array(1,2,3,4,5,6,7,8,9,0)


function securi(){

document.getElementById('secuid10').value=''
var allElements = document.getElementById('secure').getElementsByTagName('td'); 

for (var i = 0; i< allElements.length; i++){

if(tbimage.length==1){
allElements[i].firstChild.nodeValue=tbimage[0]
}
else{
var spl=Math.round(Math.random()*(tbimage.length-1))
allElements[i].firstChild.nodeValue=tbimage[spl]
tbimage.splice(spl,1)
}
var dd='secuid'+i+''
allElements[i].id=dd
allElements[i].onmouseover=function(event){parde(event)};
allElements[i].onmouseout=finparde
}
}

function inval(lui){
var obja=document.getElementById('secuid10')
obja.value=obja.value+document.getElementById(lui).firstChild.nodeValue
}

function parde(lui){
var di=(navigator.appName.substring(0,3)=="Mic") ? event.srcElement.id : lui.currentTarget.id
terin=setTimeout("inval('"+di+"')",1000)
}

function finparde(){
clearTimeout(terin)
}

function roze(){
document.getElementById("secuid10").value=''
}
</script>
</head>
<body onload='securi()'>

<div class='sgen'>
<table id='secure'>
<tr>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
</tr><tr>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
<td class='divimage'>titre</td>
</tr>
</table>

<input type='password' readonly='true' id='secuid10'/>

<ul>
<li><div onclick='roze()'>annuler</div></li>
<li><div>valider</div></li>
</ul>
<div>
</body>
</html>

 Conclusion

youep

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

04 mai 2010 20:48:24 :
petite correction
22 janvier 2011 11:13:19 :
modif du graphisme
24 janvier 2011 12:37:23 :
debogage ie
24 janvier 2011 12:37:24 :
debogage ie
14 mars 2011 12:57:20 :
ajout de la correction de la frappe et séparation du css et du js

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D

 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MOT DE PASSE EN HTML par kazma
Source avec Zip Source avec une capture VÉRIFICATION DU NIVEAU DE SÉCURITÉ DU MOT DE PASSE par zuff
Source avec Zip MOT DE PASSE PAR LOGIN ET PASSWORD par HTMLer
Source avec Zip PROTÉGER UNE PAGE PAR MOT DE PASSE par et1
Source avec Zip MOT DE PASSE SIMPLE ET SURTOUT INVISIBLE par massacr

Commentaires et avis

Commentaire de asmabeach le 07/05/2010 14:09:10

comment peut-on utiliser une clavier numerique pour securiser nos pc? est-il efficace?

Commentaire de kazma le 07/05/2010 22:36:38 administrateur CS

il sert a securiser la frappe du fait que la position des touches n'est jamais la meme et que l' on n'utilise pas les touches du clavier pour saisir le code afin d'eviter les keyloggers

Commentaire de gag37 le 10/05/2010 13:07:17

Sympa le code, bravo.
Juste un petit regret qu'il n'existe la fonction "corriger" pour annuler la dernière frappe et petite lenteur d'interprétation.

Commentaire de arta le 14/03/2011 08:14:11

Bonjour tous

Dommage pour la fonction corriger manquante.

Commentaire de kazma le 14/03/2011 13:00:33 administrateur CS

a la demande générale j'ai rajouter la correction de la frappe j'en ai profiter pour séparer le css et le js

Commentaire de arta le 14/03/2011 16:34:26

RE

Merci kazma ;)
Aller hop dans la besace et va essayer.

Commentaire de lanner le 14/03/2011 18:12:29 10/10

Bonjour , merci pour la source

Comment fait on pour récuperer l'information en php ,pour le mettre dans un formulaire et tester ce que l'on à écrit par rapport à ce que l'on a dans une base de donnée

PS : juste un gros défaut, ca rame énormement lorsque l'on clique sur un numéro , cela ne fait pas assez vite je trouve

Merci :)

Commentaire de kazma le 15/03/2011 20:39:26 administrateur CS

pour récuperer l'information en php et le mettre dans un formulaire dans le fichier html il y a cette ligne

<input type='password' readonly='true' id='secuid10'/>

il suffit de lui rajouter un formulaire et lui mettre un id

<form action="inscription.php" method="post" id="mon_formulaire"><input type='password' readonly='true' id='secuid10'/></form>

ensuite sut le div du bouton valider il faut faire un submit

<div onclick='document.getElementById("mon_formulaire").submit()'>valider</div>


et pour le clic c'est normale car il ne faut pas cliquer il faut pausitionner la souris sans cliquer durant une demi minute on peut diminuer la durée an modifiant cette ligne (le 600)

terin=setTimeout("ksecure.inval('"+di+"')",600)


 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Mot de passe & Login [ par cgaraffa ] Bonjour.Comment est ce qu'on fait pour faire apparaître une boite de dialogue Windows ( authentification ) qui demande le nom d'utilisateur et le mot javascript [ par matmojito ] Bonjour à tous!!!J'ai une petite questionJ'ai ce formulaire là &lt;form name="modif" method="post"&gt;&lt;p&gt;&lt;font size="+1"&gt;Login : &lt;input Login [ par mortalino ] Salut à tous, j'ai trouver ce code dans les sources qui fait apparaitre une fenetre de login et d'utilisateur, et un bouton connexion. 1/ Comment fai Demande de Login et Mot de Passe [ par mortalino ] Salut à tous, j'ai pris cette source : http://www.javascriptfr.com/code.aspx?ID=15833 celle-ci fait apparaitre une nouvelle fenetre avec un emplacem mettre un code en annexe ( code.js) [ par floky56 ] Bonjour, je voudrais savoir comment mettre un code source dans un autre fichier : j'ai fait des test d&#233;ja mais ca ne fonctionne pas&nbsp; voici m SOS requete [ par spoutniks ] ok je vais essayer de faire une meilleur explication. J'ai une base de donn&#233;es SQL avec comme champs des logins et mot de passe. Actuellement j'i Authentification sur deux plateformes différentes en Javascript [ par bokal ] Bonjour, voila j'ai deux applications différentes une en jsp et l'autre en php avec deux modules d'authentifications différents mais leurs base de don Aide pour protection [ par sylveur ] Bonjour à tous voila un script que j'ai modifié pour un accès priver.Le soucie c'est qu'il ne m'arche pas.J'aimerai savoir si l'un de vous pourrais m' ouverture page URL [ par chipywood ] Bonjour à tous , je suis bloqué sur un petit problème.J'ai utilisé le code ci-dessous pour avoir une page qui s'ouvre avec un mot de passe ; le problè MOT DE PASSE PAGE WEB [ par must77 ] Voici le code que j'ai inséré dans une page html :&lt;script Language="JavaScript"&gt;&lt;!--var password = '';password=prompt('Veuillez entrer votre


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,482 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales