Question

我想要完成的是让用户输入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>

Answer 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();
}

如何保留用户突出显示的文本，然后单击其他位置时突出显示？

1 个答案: