javascript boton de borrado de teclado virtual

As3 · #1 (**permalink**) 10/09/2015, 13:37

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<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script>
// JavaScript Document
var cifra="";
var valores=[];
function display_ecuacion(num){
    valores.push(num);
    document.getElementById("display").value =cifra+num;
    cifra=document.getElementById("display").value;
    }
function resetearDisplay(){
document.getElementById("display").value ="";
    cifra = "";
} </script>
<style>
.tamBot{
    width:30px;
    height:30px;
    padding:2px;
    font-size:150;
    font-weight:bolder;
    font-style:italic;
    color:#181531;
    background-color:#E8F7EE;
    float:left;}
 
.tablita{
    float:none;
    margin:20px;
    width:200px;
    font-size:1em;
    font-weight:400;}
 
 </style>
</head>
 
<body>
 <form action="respuestas.php" name="ejercicio" method="post" enctype="multipart/form-data" >
 <div class="dom">Dom( f )={</div><input name="display" type="text" id="display" class="display" required/> <div class="dom">}</div> 
  <input name="elreset" type="button" class="dom2" id="borro" value="Borrar" onClick="resetearDisplay()">
<br><br>
 
<table class="tablita" border="1" >
   <tr>
    <td width="5%"><input name="button1" type="button"  class="tamBot" id="button1" value="x&sup2" onClick="display_ecuacion('\xB2')"></td>
    <td width="5%"><input name="button2" type="button" class="tamBot" id="button2" value="x&sup3"onClick="display_ecuacion('\xB3')"></td>
    <td width="5%"><input name="button3" type="button" class="tamBot" id="button3" value="=" onClick="display_ecuacion('=')"></td>
    <td width="5%"><input name="button4" type="button" class="tamBot" id="button4" value="≠" onClick="display_ecuacion('\u2260')"></td>
    <td width="5%"><input name="button5" type="button"  class="tamBot" id="button5" value="≤" onClick="display_ecuacion('\u2264')"></td>
    <td width="5%"><input name="button6" type="button" class="tamBot" id="button6" value="≥" onClick="display_ecuacion('\u2265')"></td>  
   </tr>
   <tr>
    <td width="5%"><input name="button7" type="button" class="tamBot" id="button7" value="∞" onClick="display_ecuacion('\u221E')"></td>
    <td width="5%"><input name="button8" type="button" class="tamBot" id="button8" value="∈" onClick="display_ecuacion('\u2208')"></td>
    <td width="5%"><input name="button9" type="button" class="tamBot" id="button9" value="√" onClick="display_ecuacion('\u221A')"></td>
    <td width="5%"><input name="button10" type="button" class="tamBot" id="button10" value="∪" onClick="display_ecuacion('\u222A')"></td>
    <td width="5%"><input name="button11" type="button" class="tamBot" id="button11" value="│x│" onClick="display_ecuacion(' \|x\|')" ></td>
    <td width="5%"><input name="button12" type="button" class="tamBot" id="button12" value="ℜ" onClick="display_ecuacion('\u211C')"></td>
   </tr>
   <tr>
    <td width="5%"><input name="button713" type="button" class="tamBot" id="button13" value="x" onClick="display_ecuacion('x')"></td>
    <td width="5%"><input name="button14" type="button" class="tamBot" id="button14" value="∈" onClick="display_ecuacion('\u2208')"></td>
    <td width="5%"><input name="button15" type="button" class="tamBot" id="button15" value="√" onClick="display_ecuacion('\u221A')"></td>
    <td width="5%"><input name="button16" type="button" class="tamBot" id="button16" value="∪" onClick="display_ecuacion('\u222A')"></td>
    <td width="5%"><input name="button17" type="button" class="tamBot" id="button17" value="│x│" onClick="display_ecuacion(' \|x\|')" ></td>
    <td width="5%"><input name="button18" type="button" class="tamBot" id="button18" value="ℜ" onClick="display_ecuacion('\u211C')"></td>
  </tr>
  
  </table>
  <input type="submit" value="Corregir" class="dom2" />
  </form>
 </div>
         
</body>
</html>

Triby · #2 (**permalink**) 10/09/2015, 17:40

Esto no tiene que ver con PHP, muevo tu tema a Javascript.

lubtufano · #3 (**permalink**) 10/09/2015, 22:47

Para borrar un sólo dígito se puede usar la función substring

Código Javascript:

Ver originalfunction borrarUno() {
  var contenido= documet.getElementById("display").value;
  document.getElementById("display").value= contenido.substring(0, contenido.length-1);
}
<input type="button" value="borrar último" onclick="borrarUno()" />

En la función display_ecuacion se debería primero asignar el valor a la variable cifra y después agregar el símbolo, así permanecerá también lo ingresado con el teclado en el campo de texto.

Código Javascript:

Ver originalfunction display_ecuacion(num) {
  valores.push(num);
  cifra= document.getElementById("display").value;
  document.getElementById("display").value= cifra+num;
}