Text obstructing a textarea

Question

In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.

However, the text inside the div obstructs and makes the user unable to select text inside 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>

-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.

How would I stop the div from making the user unable to select text from the textarea (if this is possible)? If not, are there any alternatives to the method I use?

Edit: I should have made it clear from the start I wanted multiple types of formatting.

not totally an answer but quill.js https://quilljs.com/ might be helpful to you — Robbie Milejczak, Oct 27 '17 at 19:46
@TemaniAfif I think I've come to a conclusion already, so don't worry about it but thanks anyways. — ShuckleShackle, Oct 27 '17 at 20:07

holden · Answer 1 · 2017-10-27T19:52:10.927

1

In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...

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

That's not "the magic wand", and it has its downside, but it's a good starting point.

edited Oct 27 '17 at 19:52

answered Oct 27 '17 at 19:49

holden

1,721
12
19

With a content editable `pre` element it would be much easier to emulate a textarea. – Teemu Oct 27 '17 at 19:51
Would have accepted this answer too if I could, I guess the other one just had a bit more information. How could I have multiple types of formatting with this? – ShuckleShackle Oct 27 '17 at 20:11

score 1 · Accepted Answer · answered Oct 27 '17 at 20:00

1

You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.

See this question: editable div

answered Oct 27 '17 at 20:00

Enirdas

119
8

This seems like a viable option; thank you! How would I accomplish multiple types of formatting with this? – ShuckleShackle Oct 27 '17 at 20:09

Amine Hakkou · Answer 3 · 2017-10-28T15:31:04.993

0

You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:

.copyc:hover txtarea {
z-index: 2;
}

edited Oct 28 '17 at 15:31

answered Oct 27 '17 at 19:49

Amine Hakkou

554
5
14

I'm not sure I fully understand what you mean by "when the div is hovering over the parent div". Do you mean when the cursor is hovering over the textarea? – ShuckleShackle Oct 27 '17 at 20:01
sorry, yeah that's what i meant – Amine Hakkou Oct 28 '17 at 15:31

score 0 · Answer 4 · answered Oct 27 '17 at 19:49

0

Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.

.dark-text {
    font-weight: bold;
    font-color: black;
}

answered Oct 27 '17 at 19:49

Tyler

1,029
1
8
20

1

I wanted to format different parts of the textarea different colors, etc. I believe this is not possible with a textarea. – ShuckleShackle Oct 27 '17 at 19:59

Text obstructing a textarea

4 Answers4