5

Quiero hacer un efecto que cuando el usuario escribe, se vaya marcando de un color el texto que tiene que escribir.

En el siguiente enlace está lo que quiero hacer:

https://www.keytrac.net/en/tryout

... en la opción ANYTEXT SOLUTION.

Haciendo la prueba, escribiendo, se va marcando de color amarillo el texto de prueba.

Acá dejo una captura de pantalla.

introducir la descripción de la imagen aquí

Quiero que me den alguna idea de cómo hacerlo, o algun ejemplo.

2 respuestas 2

7

Puedes usar la etiqueta <mark></mark>

<!DOCTYPE html>
<html>
    <body>
        <p>
            Do not forget to buy
            <mark>
                milk
            </mark>
            today.
        </p>
        <p>
            <strong>
                Note:
            </strong>
            The mark tag is not supported in Internet Explorer 8 and earlier versions.
        </p>
    </body>
</html>

puedes ver los detalles en Mark tag y el ejemplo funcional que ofrece. También puedes intentar:

<span style="background-color: #FFFF00">Yellow text.</span>

Ejemplo de uso

Para destacar texto dinamicamente usando la etiqueta <mark></mark> anterior, puedes usar un código como el siguiente:

var texto;
var div;

function inicializar() {
    div = document.getElementById("texto");
    texto = div.getElementsByTagName('p')[0].innerHTML;
    document.getElementById("entrada").addEventListener('input', actualizar);
}

function actualizar() {
    var porDestacar = document.getElementById("entrada").value;
    document.getElementById("texto").innerHTML = destacar(porDestacar);
}

function destacar(porDestacar) {
    var textoDestacado = "<p>";

    if (porDestacar.length == 0) {
        textoDestacado += texto;
        return textoDestacado + "</p>"
    }

    var sigPosicion = 0,
        posicion;

    while ((posicion = texto.indexOf(porDestacar, sigPosicion)) > -1) {
        textoDestacado += texto.substring(sigPosicion, posicion);
        textoDestacado += "<mark>" + texto.substring(posicion, posicion + porDestacar.length) + "</mark>";
        sigPosicion = posicion + porDestacar.length;
    }

    if (sigPosicion + porDestacar.length < texto.length) {
        textoDestacado += texto.substring(sigPosicion, texto.length - 1);
    }

    return textoDestacado + "</p>";
}

window.onload = inicializar;
body {
  background: #ffffff;
  color: #444444;
}

mark {
  background: #a8d1ff;
}
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            <!-- Aquí va el codigo javascrip que está mas abajo -->
        </script>
    </head>
    <body>
        <div id="texto">
            <p>
                HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, vídeos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.
            </p>
        </div>
        <input id="entrada" type="text"/>
    </body>
</html>

Puedes ver el ejemplo funcionando en JsFiddle, o puedes darle al botón ejecutar.

0
2

basandome en la respuesta de @Arie CwHat, modifique su codigo para solucionar mi problema, que consiste en colorear el texto sin importar lo que se escribio, solamente que avance.

  var texto;
var div;
var pos=0;

function inicializar() {
div = document.getElementById("texto");
texto = div.getElementsByTagName('p')[0].innerHTML;
document.getElementById("entrada").addEventListener('input', actualizar);
}

function actualizar() {
var porDestacar = document.getElementById("entrada").value;
document.getElementById("texto").innerHTML = destacar(porDestacar);
}

function destacar(porDestacar) {
var textoDestacado = "<p>";

   
pos++;
   
if (porDestacar.length == 0) {
    textoDestacado += texto;
    return textoDestacado + "</p>"
}

var sigPosicion = 0,
    posicion;
    

    textoDestacado += "<mark>" + texto.substring(0, porDestacar.length) + "</mark>";
    sigPosicion =  porDestacar.length;
   
if (sigPosicion  < texto.length) {
    textoDestacado += texto.substring(sigPosicion, texto.length - 1);
}

return textoDestacado + "</p>";
}

window.onload = inicializar;
<body>
    <div id="texto">
    <p>HTML, sigla en inglés de HyperText Markup Language (lenguaje de marcas de hipertexto), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.</p>
    </div>
    <input id="entrada" type="text"/>
</body>

7
  • excelente, pero ¿es normal que cuando borras igual avance? 😄 Commented el 21 dic. 2016 a las 2:36
  • @ArieCwHat ups me olvide de eso
    – hubman
    Commented el 21 dic. 2016 a las 2:37
  • 1
    quizá la cantidad de texto destacado deba ser igual al lenght del input :) Commented el 21 dic. 2016 a las 2:40
  • @ArieCwHat pense hacerlo con keyDown pero creo que tu solucion length es mejor
    – hubman
    Commented el 21 dic. 2016 a las 2:57
  • 1
    @ArieCwHat ya lo modifique, ahora falta que cambie de color verde cuando llegue al final del texto
    – hubman
    Commented el 21 dic. 2016 a las 3:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.