ajmataurus, no es de pistas.. es de darse una vuelta al source del site...ahi esta el javascript que necesitas...
Ok... te paso un ejemplo de como te puede quedar.. pero es indispensable que busques como hacer las cosas para que aprendas..
Coloca 2 textbox de ésta forma con el nombre del form por ejemplo rootk jeje
Cita: <form id="rootk" name="rootk" method="post" runat="server">
...
<input readonly name="clave" type="password"><br>
<input type="text" name="pin">
...
ahora.. colocar la tabla que generará los numeros aleatorios..
y sería de esta forma:
Código PHP:
<table bordercolor="#9f4569" cellpadding="0" cellspacing="1" border="1" width="75">
<tr align="center" height="20">
<td width="25">
< href="javascript:onPadClick(1,%207,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_7" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%208,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_8" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%209,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_9" size="1" tabindex="-1" type="text"></a>
</td>
</tr>
<tr align="center" height="20">
<td width="25">
<a href="javascript:onPadClick(1,%204,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_4" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%205,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_5" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%206,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_6" size="1" tabindex="-1" type="text"></a>
</td>
</tr>
<tr align="center" height="20">
<td width="25">
<a href="javascript:onPadClick(1,%201,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_1" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%202,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="this.style.cursor='hand';this.style.color='#FF8533';window.status='CLAVE';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_2" size="1" tabindex="-1" type="text"></a>
</td>
<td width="25">
<a href="javascript:onPadClick(1,%203,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="window.status='CLAVE';this.style.cursor='hand';this.style.color='#FF8533';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_3" size="1" tabindex="-1" type="text"></a>
</td>
</tr>
<tr align="center" height="20">
<td width="25">
<a href="javascript:onPadClick(1,%200,document.RootK.pin,document.RootK.clave,%208)">
<input onmouseout="this.style.color='#000066'" onmouseover="window.status='CLAVE';this.style.cursor='hand';this.style.color='#FF8533';return true;"
style="BORDER-RIGHT:0px;BORDER-TOP:0px;FONT-SIZE:8pt;BORDER-LEFT:0px;WIDTH:17px;COLOR:#000066;BORDER-BOTTOM:0px;FONT-FAMILY:Arial,Helvetica,sans-serif;TEXT-ALIGN:center"
readonly name="_1_llave_0" size="1" tabindex="-1" type="text"></a>
</td>
<td colspan="2">
<font><a class="texto_limpiar" href="javascript:onPadClick(1,%20-1,document.RootK.pin,document.RootK.clave,%208);"
onmouseover="window.status='Limpiar';return true;"> limpiar </a></font>
</td>
</tr>
</table>
Y despues en los headers colocaras el javascript que se encarga de hacer el efecto:
Código PHP:
<script language="javascript">
var random_array1 = new Array(0,1,2,3,4,5,6,7,8,9);
var random_array2 = new Array(0,1,2,3,4,5,6,7,8,9);
var gHiddenField = null;
var gShownField = null;
function cTrim(cad, car){
//Descripcion: Elimina los caracteres 'car' que encuentre en la cadena 'cad'
var i;
var cad2="";
for(i=0;i<cad.length;i++)
if(cad.charAt(i)!=car)
cad2 += cad.charAt(i);
return cad2;
}
function genRandomArray( keyPad ){
var aux = 0;
var swpIdx = 0;
var random_array;
if( keyPad == 1 )
random_array = random_array1;
else
random_array = random_array2;
for( var i = 0; i < 10; i ++ ){
swpIdx = Math.ceil(Math.random()*9);
aux = random_array[swpIdx];
random_array[swpIdx] = random_array[i];
random_array[i] = aux;
}
for( var i = 0; i < 10; i ++ )
eval("document.RootK._"+keyPad+"_llave_"+i+".value='"+random_array[i]+"';");
}
function onPadClick( keyPad, padPos, hiddenField1, shownField1, lengthField) {
var random_array;
var field;
if( padPos == -1 ){
hiddenField1.value = "";
shownField1.value = "";
return;
}
field = cTrim(shownField1.value, " ");
if (field.length >= lengthField){
if( keyPad != 2 )
return;
}
if( keyPad == 1 )
random_array = random_array1;
else
random_array = random_array2;
var padKey = random_array[ padPos ];
hiddenField1.value += padKey;
shownField1.value += "*";
field = cTrim(shownField1.value, " ");
}
</script>
Y listo... solo haz copy and paste.. , ya está listo para usar..
Mas facil no te lo puedo hacer...
