当前位置: 代码迷 >> JavaScript >> jquery 怎么选中鼠标选中的文字,然后在前后加上标签 就是BBCODE
  详细解决方案

jquery 怎么选中鼠标选中的文字,然后在前后加上标签 就是BBCODE

热度:154   发布时间:2012-08-09 15:59:21.0
jquery 如何选中鼠标选中的文字,然后在前后加上标签 就是BBCODE
如题,就是CSDN回复的效果 就是比如我在回复框 写了“abc" 然后选中abc点击上面的B 就在abc前后加上B标签了,怎么写的呢?

------解决方案--------------------
HTML code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo : Textarea 元素的光标位置</title>
<style>
#result {
    font-size:18px;
    line-height:25px;
    padding-left:20px;
}
</style>
</head>

<body>

<h1>Textarea 元素的光标位置</h1>
<ul>
    <li>获取 Textarea 元素当前的光标位置</li>
    <li>设置回原先的 Textarea 元素的光标位置</li>
    <li>在 Textarea 元素的光标位置插入文本</li>
</ul>

<form action="#">
    <textarea id="test" rows="8" cols="50"></textarea> 
    <p>
        <input type="button" id="get" value="Get Cursor Position"/>
        <input type="button" id="set" value="Set Cursor Position"/>
        <input type="button" id="add" value="Add Text After Cursor Position"/>
    </p>
</form>

<h2>Textarea Range:</h2>
<div id="result"></div>

<script type="text/javascript">

 
var cursorPosition = {
    get: function (textarea) {
        var rangeData = {text: "", start: 0, end: 0 };
    
        if (textarea.setSelectionRange) { // W3C    
            textarea.focus();
            rangeData.start= textarea.selectionStart;
            rangeData.end = textarea.selectionEnd;
            rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
        } else if (document.selection) { // IE
            textarea.focus();
            var i,
                oS = document.selection.createRange(),
                oR = document.body.createTextRange();
            oR.moveToElementText(textarea);
            
            rangeData.text = oS.text;
            rangeData.bookmark = oS.getBookmark();
            
            for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {

                if (textarea.value.charAt(i) == '\r' ) {
                    i ++;
                }
            }
            rangeData.start = i;
            rangeData.end = rangeData.text.length + rangeData.start;
        }
        
        return rangeData;
    },
    
    set: function (textarea, rangeData) {
        var oR, start, end;
        if(!rangeData) {
            alert("You must get cursor position first.")
        }
        textarea.focus();
        if (textarea.setSelectionRange) { // W3C
            textarea.setSelectionRange(rangeData.start, rangeData.end);
        } else if (textarea.createTextRange) { // IE
            oR = textarea.createTextRange();
            if(textarea.value.length === rangeData.start) {
                oR.collapse(false);
                oR.select();
            } else {
                oR.moveToBookmark(rangeData.bookmark);
                oR.select();
            }
        }
    },

    add: function (textarea, rangeData, text) {
        var oValue, nValue, oR, sR, nStart, nEnd, st;
        this.set(textarea, rangeData);
        
        if (textarea.setSelectionRange) { // W3C
            oValue = textarea.value;
            nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
            nStart = nEnd = rangeData.start + text.length;
            st = textarea.scrollTop;
            textarea.value = nValue;
            if(textarea.scrollTop != st) {
                textarea.scrollTop = st;
            }
            textarea.setSelectionRange(nStart, nEnd);
        } else if (textarea.createTextRange) { // IE
            sR = document.selection.createRange();
            sR.text = text;
            sR.setEndPoint('StartToEnd', sR);
            sR.select();
        }
    }
}


var tx=document.getElementById("test"),
    re=document.getElementById("result"),
    pos;

document.getElementById("get").onclick = function(){
    pos = cursorPosition.get(tx);
    re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));
}

document.getElementById("set").onclick = function(){
    cursorPosition.set(tx, pos);
}

document.getElementById("add").onclick = function(){
    cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本:",""));
}
</script>

</body>
</html> 
  相关解决方案