在 <textarea> 中格式化文本？

Posted 2023-05-07

【中文标题】在 <textarea> 中格式化文本？

【英文标题】：Format text in a <textarea>?

【发布时间】：2012-10-01 14:50:23

【问题描述】：

文本区域非常棒，因为它有一些内置功能（滚动条）。如何在<textarea> 内格式化<spans> 的文本？

【参考方案1】：

如果您需要自定义 textarea，请使用具有 contenteditable 属性的另一个元素（如 DIV）重现其行为。

它更可定制，也更现代，textarea 仅适用于纯文本内容，而不适用于丰富的内容。

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

滚动条可以通过 CSS 溢出属性来重现。

您可以在表单中正常使用这个假文本区域，即：如果您必须通过 POST 方法提交其内容，您可以执行类似（使用 jQuery）的操作：

<input type='hidden' id='fake_textarea_content' name='foobar' />

...

$('#your_form').submit(function()

  $('#fake_textarea_content').val($('#fake_textarea').html());
);

【讨论】：

contenteditable 并不是所有的点和彩虹。这篇文章是一篇很棒的读物，我希望在尝试在我的一些项目中使用 contenteditable 之前看到它：medium.com/content-uneditable/…。看起来很好，但它有很大的缺陷。

【参考方案2】：

您不能单独设置文本区域内容的样式，您必须使用<div>s 或类似的东西。

你想要这样的东西吗：？

http://jsfiddle.net/mekwall/XNkDx/

$('.editable').each(function()
    this.contentEditable = true;
);

这允许您编辑 div 的内容，它仍然看起来像一个 textarea，

现在可以使用粗体了。

【讨论】：

http://jsfiddle.net/XNkDx/2199/ 我只是添加了几行代码来向您展示它是如何真正起作用的。而且，我的朋友，为你 +1，不错的小脚本

...我说一个问题是它自己的副本。怎么没人注意到？

【参考方案3】：

您不能在 TEXTAREA 中使用 HTML。

通过添加overflow: auto 和固定width 和/或height，可以将滚动应用于任何元素。

【参考方案4】：

您可以使用 CKEditor 等网页 html 编辑器来格式化文本区域中的数据。检查这个http://ckeditor.com/

【参考方案5】：

另一种提交“假”文本区域的方法是在表单标签中包含以下行

<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>

【讨论】：

我认为您在回答中遗漏了一些内容。

uppsss.. 修复它。干杯！