单击粗体或斜体标记时,光标位于中间

When clicked on bold or italic tag cursor to be in middle?

本文关键字:于中间 光标 中间 斜体 单击      更新时间:2023-09-26

我正在我的一个torrent网站中使用此代码。当您点击'B'标签时,会显示下一个代码[B][/B]。然而,当完成此操作时,光标的位置位于这些标签的开头,而不是中间,如下所示:[b]光标在此[/b]

这是代码:

<script type="text/javascript">
function BBTag(tag, s, text, form) {
    switch (tag) {
        case '[url]':
            var start = document.forms[form].elements[text].selectionStart;
            var end = document.forms[form].elements[text].selectionEnd;
            if (start != end) {
                var body = document.forms[form].elements[text].value;
                var left = body.substr(body, start);
                var middle = "[url]" + body.substring(start, end) + "[/url]";
                var right = body.substr(end, body.length);
                document.forms[form].elements[text].value = left + middle + right;
            } else {
                document.forms[form].elements[text].value = document.forms[form].elements[text].value + "[url][/url]";
            }
            document.forms[form].elements[text].focus();
    }

这是插入这些标签的代码:

<td align="center">
    <input type="button" name="url" value="URL " onclick="javascript: BBTag('[url]', 'url', '<?php echo $name; ?>', '<?php echo $form; ?>')" />
</td>

您忘记用花括号关闭函数:

<script type="text/javascript">
    function BBTag(tag, s, text, form) {
        switch (tag) {
            case '[url]':
                var start = document.forms[form].elements[text].selectionStart;
                var end = document.forms[form].elements[text].selectionEnd;
                if (start != end) {
                    var body = document.forms[form].elements[text].value;
                    var left = body.substr(body, start);
                    var middle = "[url]" + body.substring(start, end) + "[/url]";
                    var right = body.substr(end, body.length);
                    document.forms[form].elements[text].value = left + middle + right;
                } else {
                    document.forms[form].elements[text].value = document.forms[form].elements[text].value + "[url][/url]";
                }
                document.forms[form].elements[text].focus();
        }
    // You miss a function closing curly bracket here
</script>

我建议您使用干净的缩进代码。所以下次你会发现这些错误。

您希望使用此网站中的setCaretPosition()。

而不是使用

document.forms[form].elements[text].focus();

从"document.forms[form].elements[text].value length"中减去"最后一个闭合标记的长度",就可以得到光标的确切位置。

//编辑

工作小提琴http://jsfiddle.net/NaAxn/

正如我所说,您必须从文本区域长度减去结束标记长度:

var pos = document.forms[form].elements[text].value.length - (tag.length + 1); // Closing tag has + 1 char because of the slash 
setCaretPosition(document.forms[form].elements[text], pos);