| Respuesta: teclado virtual numerico
ADLER: excelente código te has programado; quería consultarte cómo hago para poder utilizarlo, en vez de sobre un textarea, sobre dos "input" diferentes.
Necesito sólo los números del 0 al 9, el . y el backspace.
para esto reduje tu código así:
Código:
<html>
<head>
<title>teclado en pantalla</title>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
// Comprueba Navegador y Plataforma del pc
var clientPC = navigator.userAgent.toLowerCase(); // Coge info cliente
var clientVer = parseInt(navigator.appVersion); // Coge versión navegador
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
&& (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
&& (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;
var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);
function imprm(bot) {
var txtarea = document.getElementById('ta');
var tecla = new Array('1','2','3','4','5','6','7','8','9','0','q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','ñ','z','x','c','v','b','n','m',',','.','-','\n',' ',' ');
txtarea.value+=tecla[bot];
txtarea.focus();
return;
}
function imprM(bot) {
var txtarea = document.getElementById('ta');
var teclaM = new Array('!','"','·','%','/','(',')','=','?','¿','Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Ñ','Z','X','C','V','B','N','M',';',':','_','\n',' ',' ');
txtarea.value+=teclaM[bot];
txtarea.focus();
return;
}
var capa1
var capa2
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
function teclado() {
if (ns4) {
capa1 = document.c1
capa2 = document.c2
}
if (ie4) {
capa1 = c1.style
capa2 = c2.style
}
if (ns6) {
capa1 = document.getElementById('c1').style
capa2 = document.getElementById('c2').style
}
}
function muestra(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
else if (ns6) obj.visibility = "visible"
}
function oculta(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
else if (ns6) obj.visibility = "hidden"
}
function borrar() {
var txtarea = document.getElementById('ta');
if ((clientVer >= 4) && is_ie && is_win) {
var txtSeleccion = document.selection.createRange().text;
if (document.selection) {
if (!txtSeleccion) {
txtarea.focus();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -txtarea.value.length);
curPos = Sel.text.length;
txtarea.value=txtarea.value.substr(0,txtarea.value.length-1);
alert("posicion1: "+curPos);
return(curPos);
}
txtarea.focus();
var Sel = document.selection.createRange();
document.selection.createRange().text = "";
Sel.moveStart ('character', -txtarea.value.length);
curPos = Sel.text.length;
alert("posicion2: "+curPos);
return(curPos);
}
}
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
var selLargo = txtarea.textLength;
var selEmpz = txtarea.selectionStart;
var selFin = txtarea.selectionEnd;
var s1 = (txtarea.value).substring(0,selEmpz);
var s2 = (txtarea.value).substring(selFin, selLargo);
txtarea.value = s1 + s2;
alert("posicion3: "+selEmpz);
return(selEmpz);
}
else
{
var selLargo = txtarea.textLength;
txtarea.value = txtarea.value.substr(0,txtarea.value.length-1);
var Cursor = txtarea.textLength;
alert("posicion4: "+Cursor);
return(Cursor);
}
almznaCursor(txtarea);
}
function almznaCursor(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
function PosicionCursor(pos) {
var txtarea = document.getElementById('ta');
//Firefox
if (txtarea .setSelectionRange) {
txtarea .focus();
txtarea .setSelectionRange(pos,pos);
}
else if (txtarea .createTextRange) {
var rango = txtarea .createTextRange();
rango.collapse(true);
rango.moveEnd('character', pos);
rango.moveStart('character', pos);
rango.select();
}
}
function EliminarCaracter()
{
PosicionCursor(borrar());
}
</script>
<style type="text/css">
<!--
.posLay1 {
position:absolute;
visibility:visible;
left:10px;
top:190px;
}
.posLay2 {
position:absolute;
visibility:hidden;
left:10px;
top:190px;
}
input{width:20px; height:20px; text-align:center; font-size:10px;}
-->
</style>
</head>
<body onLoad="teclado();">
<form method="post" action="teclado_pantalla.asp">
<textarea id="ta" name="textarea" cols="60" rows="10"></textarea><br>
<br><br>
<br><br>
<br><br>
<textarea id="ta2" name="textarea2" cols="60" rows="10"></textarea><br>
<br><br>
<input type="submit" id="60" value="ENTER" style="width:60px; height:20px; text-align:center; font-size:10px;"/>
</form>
<!-- TECLADO -->
<input type="button" id="1" value="1" onclick="imprm(0);" />
<input type="button" id="2" value="2" onclick="imprm(1);" />
<input type="button" id="3" value="3" onclick="imprm(2);" />
<input type="button" id="4" value="4" onclick="imprm(3);" />
<input type="button" id="5" value="5" onclick="imprm(4);" />
<input type="button" id="6" value="6" onclick="imprm(5);" />
<input type="button" id="7" value="7" onclick="imprm(6);" />
<input type="button" id="8" value="8" onclick="imprm(7);" />
<input type="button" id="9" value="9" onclick="imprm(8);" />
<input type="button" id="10" value="0" onclick="imprm(9);" />
<input type="button" id="eliminar_caracter" value="Borrar" onclick="EliminarCaracter()" style="width:40px; height:20px; text-align:center; font-size:10px;" />
<input type="button" id="39" value="." onclick="imprm(38);" />
<!-- FIN TECLADO -->
</body>
</html>
Pero aunque esté posicionado en el textarea2, cuando clickeo un número lo pone en el 1, y cuando clickeo "borrar" me devuelve un "alert" de posición4: 3, posición4:2, y así cada vez que borro.
¿alguna ayuda que puedas darme?
gracias. |