Home / Questions / 40250
Accepted
hubman
Asked: 2020-12-21 14:41:51 +0800 CST 2020-12-21 14:41:51 +0800 CST

How to make dynamic typing effect?

  • 772

I want to make an effect that when the user writes, the text that they have to write is marked with a color.

In the following link is what I want to do:

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

...in the ANYTEXT SOLUTION option .

Doing the test, writing, the test text is marked in yellow.

Here I leave a screenshot.

enter image description here

I want you to give me some idea of ​​how to do it, or some example.

javascript

2 Answers

  1. Best Answer

    You can use the tag<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>

    you can see the details in Mark tag and the working example it offers. You can also try:

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

    usage example

    To dynamically highlight text using the <mark></mark>above tag, you can use code like the following:

    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>

    You can see the example working in JsFiddle , or you can hit the run button.

    • 7

  2. Based on @Arie CwHat's answer, I modified your code to solve my problem, which is to color the text no matter what was typed, just forward.

      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>

    • 2