如何在文本区域内的文本上应用 css？答案

【问题标题】：How to apply css on text inside the text area?如何在文本区域内的文本上应用 css？
【发布时间】：2020-08-06 10:59:30
【问题描述】：

我正在将标签从下拉列表拖到文本区域，但我希望标签的文本不可编辑，我该如何实现这一点。您可以在 GIF 中看到 Text-area 中的文本现在可以编辑了。

//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);
                }

            });

【问题讨论】：

你可以禁用 total_selections ，将禁用添加到 HTML 中的文本区域，我认为它应该可以工作 <textarea disabled></textarea>
@Elnatanvazana 我不想禁用整个文本区域我只想禁用文本。

标签： javascript jquery asp.net jquery-ui-draggable

【解决方案1】：

解决方案可以是防止文本区域上的按键事件。

HTML：

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

JS：

let textarea = document.getElementById('textarea')

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

代码笔； https://codepen.io/Elnatan/pen/QWNwaZR

这应该可以解决问题。

【讨论】：