Skip to main content
7 de 7
se añadieron 32 caracteres en el cuerpo; título editado; título editado
Rubén
  • 11.5k
  • 7
  • 41
  • 85

Detección de errores de escritura falla al presionar la tecla retroceso (backspace)

Pretendo obtener los errores cometidos cuando se escribe un texto estático, en este caso (hola soy el texto estatico de prueba). Mi problema ocurre cuando se presiona retroceso/backspace, deja de funcionar.

Verifico si es espacio para así no afectar el error toda la oración sino sólo a la palabra. Ejemplo: hola como y escribo ola como, entonces estaría mal todo por que se recorre 1 posición toda la oración, sin embargo solo hay 1 error que es la h.

texto estatico         texto escrito       respuesta            resp actual 
hola soy el texto      hla soy el texto    error-> o -----l     error->ola---la

En el caso anterior solamente se equivocó el usuario en escribir la letra "o" pero su error influyó con toda la palabra. Para tratar de solucionar obtengo las posiciones de los inicios de las palabras con la función getPosiciones() eso para que el error producido, que en este caso sólo fue la letra o, no afecte a toda la oración; ahora afecta solamente a la palabra, pero igual esta mal, debería afectar a 1 letra y no a toda la palabra.

var texto = document.getElementById('captureInput');
var index = 0;
var errores = [];
var textoEstatico = "hola soy el texto estatico de prueba";
var posiciones = [];
var indexActual = 0;
var flagDoubleEspacio = false;

function is_special_key(key_id) {
  var tecladoEspecial=[8,9,13,17,18,19,27,33,34,35,36,37,38,39,40,45,46,91,93,112,113,114,115,116,117,118,119,120,121,122,123,145];
if(tecladoEspecial.indexOf(key_id)==0){
return true;
}
  return false;

}


function esLaMisma(key_id, texto, i) {
  var res = false;

  if (key_id == texto.charAt(i)) {
    res = true;
  }
  return res;
}

function posicionPalabras(texto, done) {
  var posiciones = [];
  var ini, fin, cp, tamPalabras = 0;
  ini = fin = 0, cp = 0;
  var copiaEstatica, palabra = "";
  var arrayEstatico = textoEstatico.split(" ");
  var arregloPosiciones = []
  for (var i = 0; i < arrayEstatico.length; i++) {
    tamPalabras = arrayEstatico[i].length - 1;
    if (fin == 0) {
      fin = fin + tamPalabras + 1;
    } else {
      fin = fin + tamPalabras + 2;
    }
    var auxPos = {
      ini,
      fin
    };
    palabra = arrayEstatico[i];
    arregloPosiciones.push({
      palabra: palabra,
      posiciones: auxPos
    });
    ini = fin + 1;

  };
  return done(null, arregloPosiciones);
}

function buscarPalabra(mapeo, indice, done) {

  getPosiciones();
  var intervalIni = 0,
    intervalFin = 0;
  mapeo.forEach(function(current, index, verdadero) {
    intervalIni = current.posiciones.ini;
    intervalFin = current.posiciones.fin;
    if (indice >= intervalIni && indice <= intervalFin) {
      return done(null, current.palabra)
    }
  })
}


texto.addEventListener('keydown', function(keyboardEvent) {

  if (!is_special_key(keyboardEvent.keyCode)) {

    flagDoubleEspacio = true;
    let keyC = keyboardEvent.key;

    if ((!esLaMisma(keyC, textoEstatico, index))) {
      arregloPosiciones = posicionPalabras(textoEstatico, function(err, result) {
        buscarPalabra(result, index, function(err, res) {
          let simbol = textoEstatico.charAt(index);
          let mensaje = 'palabra: ' + res + '    \tletra Original: ' + simbol + '    \tletra erronea: ' + keyC;
          mostrarMensaje(mensaje, "erroresFrecuentes");
          errores.push({
            palabra: res,
            posiciones: {
              simbol,
              keyC
            }
          });
        });
      });

    }
  } else {
    if (keyboardEvent.keyCode == 8) { //backspace
      index -= 2;
    }

  }
  if (keyboardEvent.keyCode == 32) { //espacio

    if (flagDoubleEspacio) {
      index = posiciones[indexActual];
      indexActual++;
      flagDoubleEspacio = false;
    }
  } else {
    index++;
  }

});

function mostrarMensaje(mensaje, caja) {
  var contenedor = document.getElementById(caja);
  var res = contenedor.innerText.split('\n');
  res.push(mensaje);
  contenedor.innerText = res.join('\n');
  contenedor.scrollTop = contenedor.scrollHeight - contenedor.clientHeight;
}

function getPosiciones() {

  for (var i = 0; i <= textoEstatico.length - 1; i++) {
    if (textoEstatico.charAt(i) == " ") {
      posiciones.push(i + 1);
    }

  }
}
<p>hola soy el texto estatico de prueba</p>
<textarea id="captureInput" placeholde="escribe aqui"></textarea>
<pre id="erroresFrecuentes" style="overflow-y: scroll; height:200px;"></pre>

hubman
  • 2.7k
  • 13
  • 44
  • 96