¿Cómo hacer el efecto de escritura dinámico?

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.

6
задан 21.12.2016, 01:16
2 ответа

Ты можешь использовать этикетку <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>

можешь видеть детали в Марк tag и функциональный пример , которые он предлагает. TambiГ©n ты можешь пробовать:

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

Пример использования

, Чтобы придавать особое значение тексту dinamicamente используя этикетку предыдущие <mark></mark>, ты можешь использовать один cГіdigo как следующий:

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>

ты Можешь видеть пример функционируя в JsFiddle , или можешь хотеться ему в botГіn выполнять.

7
ответ дан 24.11.2019, 11:58

основываясь на ответе @Arie CwHat, измените Ваш код, чтобы решать мою проблему, которая состоит в том, чтобы красить текст так, что не импортировать то, что было написано, только, который я продвинул.

  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
ответ дан 24.11.2019, 11:58
  • 1
    превосходный, но ¿ это нормально, что, когда ты удаляешь равное продвижение? 🠘 „ –  UselesssCat 21.12.2016, 04:36
  • 2
    @ArieCwHat ups я забыл этого –  hubman 21.12.2016, 04:37
  • 3
    quizá количество выдающегося текста должно было быть равно lenght неудара в лунку :) –  UselesssCat 21.12.2016, 04:40
  • 4
    @ArieCwHat я думал делать это с keyDown, но я думаю, что твое решение length лучше –  hubman 21.12.2016, 04:57
  • 5
    @ArieCwHat уже я это изменил, сейчас отсутствие, которое изменяло бы зеленый цвет, когда он прибудет в конце текста –  hubman 21.12.2016, 05:14

Теги

Похожие вопросы