Question

我正在使用JavaScript创建一个非常简单的代码，当您单击按钮时，该代码会将公告板代码插入到textarea中。
我编写的代码工作正常，但是，我希望能够将新标记放在光标而不是文本的末尾，然后将光标放在新标记的中间。
例如：当前，当用户点击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>

Answer 1

首先，要更改textarea中的文本，请使用其value属性而不是innerHTML，这在大多数浏览器中都不会在用户与textarea交互后生效。此外，您应该使用texteditor声明变量，例如示例中的var。

至于您的实际问题，您需要使用textarea的selectionStart和selectionEnd属性。如果你使用jQuery，你可以this plug-in（由我编写）很有用：它有一个surroundSelectedText方法。

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

否则，除了在IE＆lt; = 8中，它不会支持selectionStart和selectionEnd属性，否则会有一些代码可以执行此操作。对于旧的IE支持，我建议您查看source code of my jQuery plug-in。

演示：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);
}

如何使用JavaScript更改光标的位置，然后在其中放置新内容？

1 个答案: