Para hacer que un área de texto maneje un formato básico, coloco un div sobre él con la misma fuente y posición monoespaciales. El div mostraría el mismo texto, pero con color y negrita.

Sin embargo, el texto dentro del div obstruye y hace que el usuario no pueda seleccionar texto dentro del área de texto.

<div class="centerc">
    <div class="copyc">
        <textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
        <div id="copyadd" class="copyadd"></div>
        <!--THIS IS THE DIV FOR FORMATTING ^ -->
    </div>
</div>

-webkit-user-select: none; -ms-user-select: none; user-select: none; etc no ha solucionado este problema, solo ha hecho que el usuario no pueda seleccionar texto en el div también. Si se necesita más código CSS, lo comentaré pero no creo que sea necesario.

¿Cómo evitaría que el div haga que el usuario no pueda seleccionar texto del área de texto (si esto es posible)? Si no, ¿hay alguna alternativa al método que uso?

Editar: debería haber dejado claro desde el principio que quería múltiples tipos de formato.

0
ShuckleShackle 27 oct. 2017 a las 22:43

4 respuestas

La mejor respuesta

No puede poner formato en un área de texto, pero puede usar un div editable y deshacerse del área de texto. Al menos hará que el problema sea más simple.

Consulte esta pregunta: div editable

1
Enirdas 27 oct. 2017 a las 20:00

Para ampliar la capacidad de ser estilizado de un <textarea>, un buen punto de partida es pensar lo contrario: hacer un <div> editable ...

<div id='divTextEditable' contenteditable></div>

Esa no es "la varita mágica", y tiene su lado negativo, pero es un buen punto de partida.

1
holden 27 oct. 2017 a las 19:52

Podría, por ejemplo, agregar una regla CSS que coloque el área de texto delante del div cuando el usuario se mueva sobre el div padre, algo así:

.copyc:hover txtarea {
z-index: 2;
}
0
Amine Hakkou 28 oct. 2017 a las 15:31

¿Por qué no solo agrega un poco de CSS a textarea para lograr lo que el div está tratando de lograr?

.dark-text {
    font-weight: bold;
    font-color: black;
}
0
Tyler 27 oct. 2017 a las 19:49