Question

说我有这个文字

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>

我似乎无法加粗文字，任何想法？

Answer 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>

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

我希望它有所帮助！

Answer 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

Answer 3

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

text2 = text2.bold（）

将返回 dolor sit amet

但它会显示为带有b标签的文字。

Answer 4

对于div，它会像这样完成，但是你不能在textArea中包含span，所以如果textArea是必要的，我就无法帮助

＆＃13;

function myFunction(obj) {;

document.getElementById("span").style.fontWeight="bold";
}

＆＃13;

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

＆＃13;

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

4 个答案: