Как применить css к тексту внутри текстовой области?

Question

Я перетаскиваю теги из раскрывающегося списка в текстовую область, но я хочу, чтобы текст тега не редактировался, как я могу этого добиться. Вы можете видеть в GIF, что текст в текстовой области теперь доступен для редактирования.

//TextArea HTML Helper
    @Html.TextAreaFor(m => m.Formula, new { @class = "form-control", id = "total_selections", required = "required", rows = "4" })
//TextArea Dropable code
 $("#total_selections").droppable({
                hoverClass: 'active',
            drop: function (event, ui) {
                var str = "";
                    debugger;
                this.value += $(ui.draggable).find('select option:selected').append(',').text();
                str = this.value;
                $("#total_selections").text(str);
                }

            });

введите описание изображения здесь

Answer 1

решением может быть предотвращение события нажатия клавиши в текстовой области.

HTML:

<textarea id="textarea"></textarea>

JS:

let textarea = document.getElementById('textarea')

textarea.addEventListener("keypress", function(e){
  e.preventDefault()
});

codepen; https://codepen.io/Elnatan/pen/QWNwaZR

это должно сработать.