1

我正在使用 JavaScript 创建一个非常简单的代码，当您单击按钮时，它将公告板代码插入到文本区域中。
我编写的代码工作正常，但是，我希望能够将新标签放在光标处而不是文本末尾，然后将光标保持在新标签的中间。
例如：当前，当用户点击 b，然后 u，然后 s 时，它显示为[b][/b][u][/u][s][/s]。我希望能够做类似光标[b][u][s]^[/s][/u][/b]在哪里的事情。^有什么简单的方法可以做到这一点？

<script type="text/javascript">

   function addTag(prefix, suffix){

       texteditor = document.getElementById("texteditor");

       texteditor.innerHTML += '[' + prefix + ']' + '[' + suffix + ']';

}
</script>

<ul class="wysiwyg">
    <li><a href"#" title="Bold" class="bold" onclick="addTag('b', '/b'); return false;"></a></li>
    <li><a href"#" title="Underline" class="underline" onclick="addTag('u', '/u'); return false;"></a></li>
    <li><a href"#" title="Strike Through" class="strikethrough" onclick="addTag('s', '/s'); return false;"></a></li>
    <li><a href"#" title="Italicize" class="italics" onclick="addTag('i', '/i'); return false;"></a></li>
</ul>
4

1 回答 1

0

首先，要更改 textarea 中的文本，请使用其value属性而不是innerHTML，这在大多数浏览器中在用户与 textarea 交互后将不起作用。此外，您应该使用（或在 ES6 中）声明变量，例如texteditor在您的示例中）。varlet

至于您的实际问题，您需要使用 textarea 的selectionStart和selectionEnd属性。如果你使用 jQuery，你可能会使用这个插件（我写的）有用：它有一个surroundSelectedText方法。

$("#texteditor").surroundSelectedText("<b>", "</b>");

否则，这里有一些代码可以做到这一点，除了 IE <= 8，它不支持selectionStartandselectionEnd属性。对于旧的 IE 支持，我建议查看我的 jQuery 插件的源代码。

演示：http: //jsfiddle.net/mLkNV/

代码：

function addTag(prefix, suffix) {
    var texteditor = document.getElementById("texteditor");
    var val = texteditor.value;
    var start = texteditor.selectionStart;
    var end = texteditor.selectionEnd;

    // Insert the prefix and suffix
    texteditor.value = val.slice(0, start) +
        '[' + prefix + ']' + val.slice(start, end) + '[' + suffix + ']' +
        val.slice(end);

    // Reset the selection
    texteditor.selectionStart = start + prefix.length + 2;
    texteditor.selectionEnd = texteditor.selectionStart + (end - start);
}
于 2013-06-26T11:19:46.997 回答