将文本区域中的少量文本更改为粗体

Posted 2023-03-05

【中文标题】将文本区域中的少量文本更改为粗体

【英文标题】：Changing a small amount of text in a textarea to bold

【发布时间】：2018-10-21 12:55:37

【问题描述】：

假设我有这个文本

Lorem ipsum dolor sit amet，consectetur adipiscing elit。

我想加粗

Lorem ipsum dolor sit amet，consectetur adipiscing elit。

如果我要在 javascript 中执行此操作

function myFunction(obj) 
  var text1 = "Lorem ipsum ";
  var text2 = "dolor sit amet";
  var text3 = ", consectetur adipiscing elit.";
  text2.bold();
  
  obj.value = text1 + text2 + text3;

<textArea onmouseup=myFunction(this)>Lorem ipsum dolor sit amet, consectetur adipiscing elit</textArea>

我似乎无法将文本加粗，有什么想法吗？

【问题讨论】：

<textarea> 不支持富格式。这是一个纯文本输入。

【参考方案1】：

因为您无法在 textarea 内设置文本样式， 这是使用内容可编辑div 的解决方案： （灵感来自我对另一个问题的解决方案：Change font for selected text using JavaScript）

function changeStyle(style) 
  var sel = window.getSelection(); // Gets selection
  if (sel.rangeCount) 
    // Creates a new element, and insert the selected text with the chosen style
    var e = document.createElement('span');
    e.classList.add(style.value); // Selected style (class)
    e.innerhtml = sel.toString(); // Selected text

    // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
    var range = sel.getRangeAt(0);
    range.deleteContents(); // Deletes selected text…
    range.insertNode(e); // … and inserts the new element at its place
  

.editable 
  width: 360px;
  height: 120px;
  border: 1px solid #ccc


.editable .span-0 /* Added to reset styles correctly */
  font-weight: normal;   /* Reset b */
  text-decoration: none; /* Reset u */
  font-style: normal;    /* Reset i */


.editable .span-b
  font-weight: bold;


.editable .span-u
  text-decoration: underline;


.editable .span-i
  font-style: italic;

Highlight text and change style<br>
<select id="select_font" onchange="changeStyle(this);">
  <option value="span-0" selected>None</option>
  <option value="span-b">Bold</option>
  <option value="span-u">Underlined</option>
  <option value="span-i">Italic</option>
</select>
<div contenteditable="true" class="editable">
  Some Content
</div>

（我添加了其他样式选项……只是因为！）

希望对你有帮助！

【参考方案2】：

结果应该这样存储：

function myFunction(obj) ;
  var text1 = "Lorem ipsum ";
  var text2 = "dolor sit amet"
  var text3 = ", consectetur adipiscing elit.";
  text2 = text2.bold();

  obj.value = text1 + text2 + text3;

更多信息： https://www.w3schools.com/jsref/jsref_bold.asp

【参考方案3】：

据我所知，我们无法设置 textarea 样式，也不接受任何 HTML。

text2 = text2.bold()

将返回dolor sit amet

但它会显示为带有 b 标记的文本。

【参考方案4】：

对于 div，它会像这样完成，但是你不能在 textArea 中包含跨度，所以如果 textArea 是必要的，我真的帮不上忙

function myFunction(obj) ;

document.getElementById("span").style.fontWeight="bold";

<div onmouseup=myFunction(this) >Lorem ipsum <span id="span">dolor sit amet, </span> consectetur adipiscing elit</div>