点击粗体或斜体标签光标在中间?

时间:2013-08-13 08:47:14

标签: javascript html css

我在我的一个torrent网站上使用此代码。 当您点击'B'TAG 时,下一个代码会显示[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>

2 个答案:

答案 0 :(得分:0)

您忘了用大括号关闭该函数:

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

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

答案 1 :(得分:0)

您想使用this website中的setCaretPosition()。

而不是使用

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

从“document.forms [form] .elements [text] .value length”中减去“最后一个关闭的标签长度​​”,你就可以得到放置光标的确切位置。

//编辑

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

正如我所说,你必须从textarea长度中减去结束标记长度:

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