Clavier numerique securisé

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

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)