To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness.
However, an issue arose where the text inside the div obstructs the ability of the user to select text within the textarea.
<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>
The use of -webkit-user-select: none;-ms-user-select:none;user-select:none; did not resolve this issue, but instead prevented text selection within both the div and textarea. Additional CSS code may be necessary, which can be provided upon request.
Is there a way to prevent the div from interfering with the user's ability to select text in the textarea? If not, are there alternative approaches that could achieve similar formatting effects?
Edit: It should be clarified that the goal was to support multiple types of formatting from the outset.