Tema: javascript boton de borrado de teclado virtual
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/09/2015, 13:37
Avatar de As3
As3
 
Fecha de Ingreso: septiembre-2015
Mensajes: 6
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta javascript boton de borrado de teclado virtual
Hoola amigos estoy haciendo una pagina web sobre ejercitación de matemáticas y soy muy newby en esto de la programación, así que necesito de su gentil ayuda... Estuve viendo algunos tutoriales de JS y no entendí tanto como debería Quería crear un tecladito virtual para escribir lenguaje matemático, esto fue lo que pude hacer, pero no tengo idea de como arreglar este código para agregar un botón que borre dígito a dígito y no que borre todo lo que se escribió en el cuadro de texto... Si saben como se hace les agradezco su ayuda :D
PD: También quiero saber si se puede combinar teclear letras con el teclado de la pc alternando con los simbolos del teclado virtual y que queden en el value

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Documento sin título</title>
  6. <script>
  7. // JavaScript Document
  8. var cifra="";
  9. var valores=[];
  10. function display_ecuacion(num){
  11.     valores.push(num);
  12.     document.getElementById("display").value =cifra+num;
  13.     cifra=document.getElementById("display").value;
  14.     }
  15. function resetearDisplay(){
  16. document.getElementById("display").value ="";
  17.     cifra = "";
  18. } </script>
  19. <style>
  20. .tamBot{
  21.     width:30px;
  22.     height:30px;
  23.     padding:2px;
  24.     font-size:150;
  25.     font-weight:bolder;
  26.     font-style:italic;
  27.     color:#181531;
  28.     background-color:#E8F7EE;
  29.     float:left;}
  30.  
  31. .tablita{
  32.     float:none;
  33.     margin:20px;
  34.     width:200px;
  35.     font-size:1em;
  36.     font-weight:400;}
  37.  
  38.  </style>
  39. </head>
  40.  
  41. <body>
  42.  <form action="respuestas.php" name="ejercicio" method="post" enctype="multipart/form-data" >
  43.  <div class="dom">Dom( f )={</div><input name="display" type="text" id="display" class="display" required/> <div class="dom">}</div> 
  44.   <input name="elreset" type="button" class="dom2" id="borro" value="Borrar" onClick="resetearDisplay()">
  45. <br><br>
  46.  
  47. <table class="tablita" border="1" >
  48.    <tr>
  49.     <td width="5%"><input name="button1" type="button"  class="tamBot" id="button1" value="x&sup2" onClick="display_ecuacion('\xB2')"></td>
  50.     <td width="5%"><input name="button2" type="button" class="tamBot" id="button2" value="x&sup3"onClick="display_ecuacion('\xB3')"></td>
  51.     <td width="5%"><input name="button3" type="button" class="tamBot" id="button3" value="=" onClick="display_ecuacion('=')"></td>
  52.     <td width="5%"><input name="button4" type="button" class="tamBot" id="button4" value="≠" onClick="display_ecuacion('\u2260')"></td>
  53.     <td width="5%"><input name="button5" type="button"  class="tamBot" id="button5" value="≤" onClick="display_ecuacion('\u2264')"></td>
  54.     <td width="5%"><input name="button6" type="button" class="tamBot" id="button6" value="≥" onClick="display_ecuacion('\u2265')"></td>  
  55.    </tr>
  56.    <tr>
  57.     <td width="5%"><input name="button7" type="button" class="tamBot" id="button7" value="∞" onClick="display_ecuacion('\u221E')"></td>
  58.     <td width="5%"><input name="button8" type="button" class="tamBot" id="button8" value="∈" onClick="display_ecuacion('\u2208')"></td>
  59.     <td width="5%"><input name="button9" type="button" class="tamBot" id="button9" value="√" onClick="display_ecuacion('\u221A')"></td>
  60.     <td width="5%"><input name="button10" type="button" class="tamBot" id="button10" value="∪" onClick="display_ecuacion('\u222A')"></td>
  61.     <td width="5%"><input name="button11" type="button" class="tamBot" id="button11" value="│x│" onClick="display_ecuacion(' \|x\|')" ></td>
  62.     <td width="5%"><input name="button12" type="button" class="tamBot" id="button12" value="ℜ" onClick="display_ecuacion('\u211C')"></td>
  63.    </tr>
  64.    <tr>
  65.     <td width="5%"><input name="button713" type="button" class="tamBot" id="button13" value="x" onClick="display_ecuacion('x')"></td>
  66.     <td width="5%"><input name="button14" type="button" class="tamBot" id="button14" value="∈" onClick="display_ecuacion('\u2208')"></td>
  67.     <td width="5%"><input name="button15" type="button" class="tamBot" id="button15" value="√" onClick="display_ecuacion('\u221A')"></td>
  68.     <td width="5%"><input name="button16" type="button" class="tamBot" id="button16" value="∪" onClick="display_ecuacion('\u222A')"></td>
  69.     <td width="5%"><input name="button17" type="button" class="tamBot" id="button17" value="│x│" onClick="display_ecuacion(' \|x\|')" ></td>
  70.     <td width="5%"><input name="button18" type="button" class="tamBot" id="button18" value="ℜ" onClick="display_ecuacion('\u211C')"></td>
  71.   </tr>
  72.   
  73.   </table>
  74.   <input type="submit" value="Corregir" class="dom2" />
  75.   </form>
  76.  </div>
  77.          
  78. </body>
  79. </html>
Última edición por Triby; 10/09/2015 a las 17:40 Razón: Quitar formato "Leéme!!!!"