Necesito ayuda con un programa en PHP. Tengo un textarea y un código que hace que en el textarea se muestre "Hola".
¿Cómo puedo hacer que ese hola esté en rojo y que el "Adiós", que va después, en azul?
Codigo PHP:
<textarea name="consola" rows="8" cols="80">
<?php
echo("Hola");
echo("Adios");
?>
</textarea>
He intentado el codigo js, css y html pero me da error. Asi lo he puesto
<div class="Consola">
<script type="text/javascript">
const colorMap = {"hola": "red", "adios": "blue"};
let textArea = document.getElementById("myTextArea");
let customArea = document.querySelector(".custom-area");
let backdrop = document.querySelector(".backdrop");
//Aqui simularemos todo el textarea dentro del custom area.
textArea.addEventListener("input", function()
{
customArea.innerHTML = applyColors(textArea.value);
});
textArea.addEventListener("scroll", function()
{
backdrop.scrollTop = textArea.scrollTop;
});
//Aqui haremos el cambio de estilos.
function applyColors(text)
{
//Aqui usamos regex y con la bandera gi para que no distinga entre mayusc y minusc
let re = new RegExp(Object.keys(colorMap).join("|"), "gi");
//le agregamos el estilo
return text.replace(re, function(m)
{
let c = colorMap[m.toLowerCase()];
return `<spam style="color:${c}">${m}</spam>`;
});
}
</script>
<style media="screen">
.backdrop, #myTextArea {
font: 12px 'Open Sans', sans-serif;
letter-spacing: 1px;
width: 300px;
height: 100px;
}
#myTextArea {
margin: 0;
position: absolute;
border-radius: 0;
background-color: transparent;
color: transparent;
caret-color: #555555;
z-index: 2;
resize: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid transparent;
overflow: auto;
pointer-events: none;
}
.custom-area {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<div class="container">
<div class="backdrop">
<div class="custom-area">
hola
</div>
</div>
<textarea id="myTextArea" rows="8" cols="80"></textarea>
</div>
</div>
textarea
solo se muestra valor, pero no se interpreta HTML ni CSS. – Triby el 2 nov. 20 a las 17:06