如何使用JavaScript更改光标的位置，然后将新内容放在其上？ [英] How do I use JavaScript to change the position of a cursor and then place new content at it?

问题描述

我使用JavaScript创建一个非常简单的代码，当您点击按钮时，将公告板代码插入到文本区域。

我写的代码工作正常，但是我想要将新标签放置在光标而不是文本末尾，然后将光标保留在新标签的中间。

例如：当用户点击b时，则u然后，它显示为 [b] [/ b] [u] [/ u] [s] [/ s] 。我想要像 [b] [u] [s] ^ [/ s] [/ u] [/ b] 其中 ^ 是游标。有没有办法做到这一点？

I am using JavaScript to create a very simple code that inserts bulletin board codes into a textarea when you click on a button.
The code I wrote works ok, however, I would like to be able to place the new tags at the cursor instead of at the end of the text, and then keep the cursor in the middle of the new tags.
For example: currently, when a user clicks b, then u, then s, it displays as [b][/b][u][/u][s][/s]. I would like to be able to do something like [b][u][s]^[/s][/u][/b] where ^ is the cursor. Is there any easy way to do this?

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

推荐答案

首先，要更改textarea中的文本，请使用其值属性而不是 innerHTML ，在大多数浏览器中，用户与textarea进行交互后，它们将无法正常工作。此外，您应该使用 var 声明变量，例如 texteditor 。

First, to change the text inside a textarea, use its value property rather than innerHTML, which in most browsers will not work after the user has interacted with the textarea. Also, you should declare variables such as texteditor in your example) with var.

对于您的实际问题，您需要使用 selectionStart 和 selectionEnd textarea的。如果您使用jQuery，则可以此插件（由我撰写）很有用：它具有 surroundSelectedText 方法。

As to your actual issue, you need to use the selectionStart and selectionEnd properties of the textarea. if you use jQuery, you may this plug-in (written by me) useful: it has a surroundSelectedText method.

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

否则，这里是一些代码，除了IE< = 8支持 selectionStart 和 selectionEnd 属性。对于旧的IE支持，我建议您查看来源我的jQuery插件的代码。

Otherwise, here is some code that will do it except in IE <= 8, which does not support the selectionStart and selectionEnd properties. For old IE support, I'd suggest taking a look at the 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更改光标的位置，然后将新内容放在其上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！