如何保持用户突出显示的文本，然后在其他地方单击时突出显示？答案

【问题标题】：How can I keep the text that the user has highlighted, highlighted when then click elsewhere?如何保持用户突出显示的文本，然后在其他地方单击时突出显示？
【发布时间】：2014-05-25 03:45:50
【问题描述】：

我想要完成的是让用户在 textarea 中输入内容，然后通过突出显示他们想要编辑的内容，然后单击 textarea 外的按钮，能够编辑他们输入的内容的某些部分。（例如，粗体/颜色变化等）

我正在使用 getSelection() 来查找他们选择的部分，但是当他们单击按钮更改文本时，它会取消选定的文本。

有没有一种方法可以使文本保持突出显示，即使他们点击其中一个按钮？

谢谢！

编辑：所以我不确定的两件事是：

如何在用户单击页面不同部分上的按钮之一后使突出显示的部分保持突出显示。
我知道现在这段代码会改变整个文本区域，那么如何让它只影响选定的文本？

Javascript

var bold = 0
function boldText()
    {
        if (bold == 0)
            {
                var selected1 = getSelection()
                document.getElementById('default').style.fontWeight="bold";
                bold = 1
            }
        else
            {
                var selected1 = getSelection()
                document.getElementById('default').style.fontWeight="normal";
                bold = 0
            }
    }

HTML

<table>
    <tr>
        <td class="smallCell" onClick="boldText()"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
        <td class="smallCell"></td>
    </tr>
    <tr>
        <td colspan="10">
            <textarea id="default">Type your message here</textarea>
        </td>
    </tr>
</table>

【问题讨论】：

而不是添加css..您可以在所选文本周围添加强标签
您已经删除了使用 getSelection() 的代码，这是您描述的有问题的函数。
哎呀搞糊涂了..我期待一些具有可满足真实性的 div
如果您只是为了知识而想弄清楚这一点，那就太酷了，但这听起来像是您正在尝试制作某种 WISIWIG 编辑器，在这种情况下您可能想要查看类似的内容：tinymce.com 而不是推出自己的解决方案。
我将带有 getSelection() 的代码放回其他地方，因为它更好地展示了我正在尝试做的事情。 @Ian 我这样做只是为了学习和提高我的技能，我知道还有其他方法可以做到这一点。

标签： javascript

【解决方案1】：

首先，考虑到您的第二点，您可能无法使用 textarea 来实现您想要的：您必须在文本本身内创建 DOM 节点，textarea 不支持。

但是，这应该可以帮助您解决第一个问题：http://jsfiddle.net/noziar/2hV3X/

HTML：

<p><button type="button" onclick="boldText()">Bold!</button></p>
<p><textarea id="default" rows="4" cols="40" onselect="saveSelection()">
Some sample text here. Try selecting part of it and clicking on the button!
</textarea></p>

JS：

var start, end, bold;
function saveSelection() {
  var element = document.getElementById('default');
  start = element.selectionStart;
  end = element.selectionEnd;
}
function setSelection() {
  var element = document.getElementById('default');
  element.selectionStart = start;
  element.selectionEnd = end;
}
function boldText() {
  var element = document.getElementById('default');
  element.style.fontWeight="bold";
  if (bold == 0){
    element.style.fontWeight="bold";
    bold = 1;
  } else {
    element.style.fontWeight="normal";
    bold = 0;
  }
  setSelection();
}

【讨论】：