Estoy trabajando en un proyecto conceptual. Revelación de texto en la selección con resaltado.
Tengo que mantener el texto resaltado una vez seleccionado.
<div class="reveal" id="textToSelect"> <span class="reveal-text">texttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttext</span> <span class="reveal-text">Ctexttexttexttexttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttext</span> </div>Usé execommand para crear algunos intervalos con color de fondo en la selección. Es trabajo pero excommand ahora está obsoleto.
document.getElementById('textToSelect').addEventListener('mouseup', function() { sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } document.execCommand("hiliteColor", false, "red"); document.designMode = "off"; });¿Cómo puedo crear esos intervalos sin execCommand? Veo la respuesta, pero tal vez demasiado general para este caso específico.
¡Muchas gracias de antemano por su apoyo!
Si necesita cambiar el color una vez que hizo clic, debe agregar esto a su clase de texto revelado, por lo que en su archivo css agregue esto:
a:active { color: red; }cambiar el color en consecuencia.
¿Es el siguiente su comportamiento esperado al pasar el mouse sobre #textToSelect ?
#textToSelect .reveal-text { background-color: #ddd; cursor: pointer; } #textToSelect:hover .reveal-text { background-color: yellow; } <div class="reveal" id="textToSelect"> <span class="reveal-text">texttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttext</span> <span class="reveal-text">Ctexttexttexttexttexttexttexttexttext</span> <span class="reveal-text">texttexttexttexttexttexttexttext</span> </div>Otra opción sería tener una clase para el cambio específico que desea y alternarla con la propiedad classList en JavaScript.
Ejemplo:
var x = document.querySelector('.text-color'); x.onclick = function() { console.log('active'); }