突出顯示 Textarea 中的文本時，HTML 在 Oracle Apex 中顯示為文本

Question

我要求用戶在文本區域中將文本突出顯示為藍色。

html 沒有應用於文本區域，而是作為文本打印。

有沒有人遇到並克服了這個？

謝謝你。

這是我正在使用的代碼：

function ModifySelection () {
        var textarea = document.getElementById("P85_30DAY");
        if ('selectionStart' in textarea) {
                // check whether some text is selected in the textarea
            if (textarea.selectionStart != textarea.selectionEnd) {
                //var newText = textarea.value.substring (0, textarea.selectionStart) + 
                 //   "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
                  //  textarea.value.substring (textarea.selectionEnd);
                  var opnSpan = '<span style="color:white;background-color:blue">';
                  var clseSpan = '</span>';
                  var begText = textarea.value.substring (0, textarea.selectionStart);
                  var endText = textarea.value.substring (textarea.selectionEnd);
                  var selText = opnSpan + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + clseSpan;

                //$("#P85_30DAY").html("<span>" + begText + "<span style='color:white;background-color:blue'> " + selText + "</span>" + endText + "</span>"); //appears as text   
                // textarea.value = begText + selText + endText; //appears as text                    
                $("#P85_30DAY").val(begText + selText + endText); //appears as text


            }
        }
        else {  // Internet Explorer before version 9
                // create a range from the current selection
            var textRange = document.selection.createRange ();
                // check whether the selection is within the textarea
            var rangeParent = textRange.parentElement ();
            if (rangeParent === textarea) {
                textRange.text = "[start]" + textRange.text + "[end]";
            }
        }
    }
document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;

這是我試圖突出顯示文本的元素的 html：

<textarea name="p_t07" class="textarea" id="P85_30DAY" style="width: 587px; height: 600px; font-size: 130%; margin-top: -431px; margin-left: -1340px; position: relative;" contenteditable="true" maxlength="4000" rows="1" cols="80" wrap="virtual"></textarea>

Answer 1

您不能在textarea內使用 HTML。 它是一個輸入字段，並將其中的任何內容呈現為純文本。

相反，請查看ContentEditable ，它允許您在可編輯元素內呈現 HTML。

Answer 2

我讓它工作的人。

只能選擇一個亮點。 我會繼續努力，但如果有人對多個亮點選擇有任何想法，請隨時貢獻。

    $("#P85_30DAY").attr("contenteditable","true");
$("#P85_30DAY").css("postition","absolute");
function ModifySelection () {
            var textarea = document.getElementById("P85_30DAY");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    //var newText = textarea.value.substring (0, textarea.selectionStart) + 
                     //   "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
                      //  textarea.value.substring (textarea.selectionEnd);
                      var opnSpan = '<span style="color:white;background-color:blue">';
                      var clseSpan = '</span>';
                      var begText = textarea.value.substring (0, textarea.selectionStart);
                      var endText = textarea.value.substring (textarea.selectionEnd);
                     // var selText = opnSpan + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + clseSpan;
                      var selText = textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd);


                    //$("#P85_30DAY").html("<span>" + begText + "<span style='color:white;background-color:blue'> " + selText + "</span>" + endText + "</span>"); //appears as text   
                    // textarea.value = begText + selText + endText; //appears as text                    
                   // $("#P85_30DAY").html(begText + $("<span style='color:white;background-color:blue'></span>").text(selText) + endText); appears as object
                      //$("#P85_30DAY").val(begText + $("p").wrapInner("<span style='color:white;background-color:blue'></span>") + endText); appears as object
                  $("#P85_30DAY").empty();  //works for one highlight
                  $("<span>" + begText + "<span style='color:white;background-color:blue'>" + selText + "</span>" + endText + "</span>").appendTo("#P85_30DAY");



                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    textRange.text = "[start]" + textRange.text + "[end]";
                }
            }
        }
//document.getElementById("P85_30DAY").onkeyup = ModifySelection;
document.getElementById("P85_30DAY").onmouseup = ModifySelection;