如何在 Web 應用程式的文字區域中嵌入和呈現 HTML 標籤？

在文字區域中嵌入HTML

使用HTML 表單時，在文字區域中嵌入某些HTML 標記可能會非常有利增強用戶體驗。然而，傳統的文本區域僅將其內容視為文本，這使得有效渲染 HTML 標籤變得困難。

尋求解決方案

要克服此限制，請考慮利用內容可編輯 div 而不是文字區域。與文字區域不同，內容可編輯 div 允許使用者直接輸入和編輯 HTML 內容。這可以渲染 HTML 標籤，例如 **、、 和 。

使用HTML 和CSS 實作

要合併內容可編輯的div，請使用下列HTML 程式碼：

<div contenteditable="true"></div>

要適當設定div的樣式，加入以下CSS：

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}

範例用法

考慮以下帶有內容可編輯div 的範例：

<div contenteditable="true">
    This is the first line.<br>
    See, how the text fits here, also if<br>
    there is a <strong>linebreak</strong> at the end?<br>
    It works nicely.<br>
    <br>
    <span><p>在此程式碼中， <strong> 標籤用於將「linebreak」一詞加粗，淺綠色的span 標籤用於更改「偉大」一詞的顏色。 </strong></p>
<p>採用這種方法提供了一種直接有效的方法來在 Web 應用程式中呈現 HTML 標籤，而無需依賴外部程式庫或外掛程式。 </p></span>
</div>

以上是如何在 Web 應用程式的文字區域中嵌入和呈現 HTML 標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！