Actualmente estoy resaltando texto en un área de texto usando un rango de selección de la API web. Esto funciona bien, sin embargo, me gustaría cambiar el color de resaltado y la opacidad predeterminados. Intenté cambiar esto con css (vea el ejemplo a continuación), sin embargo, no actualiza el color de la selección. ¿Alguien sabe de una manera de lograr esto?
// select text const startPosition = 0; const endPosition = 25; textarea.setSelectionRange(startPosition, endPosition); // CSS textarea::selection { background-color: red; }No entiendo exactamente lo que quieres.
¿Querías una respuesta como la del siguiente código?
https://codepen.io/jyh7a/pen/xxpLMZZ
HTML
<input type="text" id="text-box" size="20" value="Mozilla"> <button onclick="selectText()">Select text</button> <hr/> <textarea rows="6" cols="40">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</textarea> <hr/> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro maxime excepturi autem nostrum minus quae magni, esse optio ab, dolor ut iste earum sapiente molestiae nihil totam rem ipsam officia?</p>CSS
::selection { background-color: rgba(255,0,0,0.2); }JS
function selectText() { const input = document.getElementById('text-box'); input.focus(); input.setSelectionRange(2, 5); setTimeout(() => { const textarea = document.querySelector('textarea'); textarea.focus(); textarea.setSelectionRange(0, 20); }, 1000) // // ERROR! // // setSelectionRange function only use HTMLInputElements // const p = document.querySelector('p'); // p.setSelectionRange(0, 20); } Busqué setSelectionRange
Hice el ejemplo anterior mirando la documentación oficial de MDN.
(Enlace: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange )
Espero que el código anterior te haya sido útil.