1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. Clavier numerique securisé

Clavier numerique securisé

Soyez le premier à donner votre avis sur cette source.

Vue 10 185 fois - Téléchargée 1 046 fois

Télécharger le projet
Commenter

Description

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 / Exemple : 


<!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
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2021
 118
bonjour

ouvre le fichier secure.js et remplace tout le code par celui ci 

var ksecure={

tbchiffre:[1,2,3,4,5,6,7,8,9,0],

securi:function(){

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

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

			if(ksecure.tbchiffre.length==1){
				allElements[i].firstChild.nodeValue=ksecure.tbchiffre[0]
			}
			else{
				var spl=Math.round(Math.random()*(ksecure.tbchiffre.length-1))
				allElements[i].firstChild.nodeValue=ksecure.tbchiffre[spl]
				ksecure.tbchiffre.splice(spl,1)
			}
			allElements[i].onclick=function(event){ksecure.inval(event)};
		}
	},

inval:function(e){
		var obja=document.getElementById('secuid10')
		
		var lui=typeof window.addEventListener == 'undefined' ? event.srcElement : e.currentTarget
		
		obja.value+=lui.firstChild.nodeValue
	},


roze:function(){
		document.getElementById("secuid10").value=document.getElementById("secuid10").value.substr(0, document.getElementById("secuid10").value.length-1)
	}
}


typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', ksecure.securi) : window.addEventListener("load", ksecure.securi, false);
Signaler

Bonjour, il est bien ton code vraiment pratique, j ai une petite question, est ce qu'on peut activer l option clique car mettre le curseur sur le bouton ca plus sécurisé mais je ne la trouve pas pratique pour mon site.
Merci :)
Signaler
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2021
 118
pour récuperer l'information en php et le mettre dans un formulaire dans le fichier html il y a cette ligne

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

<form action="inscription.php" method="post" id="mon_formulaire"></form>

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

valider

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)
Signaler
Messages postés
131
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
8 avril 2015
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 :)
Signaler
Messages postés
98
Date d'inscription
dimanche 22 janvier 2006
Statut
Membre
Dernière intervention
24 juillet 2013
RE

Merci kazma ;)
Aller hop dans la besace et va essayer.
Afficher les 10 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)