博客园评论（回复、引用）的实现

使用过博客园评论功能的人都知道，点击回复，光标会移到文本框里并在文本框加入@XXX；点击引用，在文本框加入@XXX跟回复的内容。

这里我想实现的就是光标移动并向textarea加入文字

第一步：点击加入文字（假设已得到用户名张三、李四）

先看效果:(点击回复)

一楼：张三回复
二楼：李四回复

代码

<style>
    .pointer {
        margin-left: 50px;
        cursor: pointer;    
        color: #ffa800;
    }
</style>
<script type="text/javascript">
function insert(con)
{var _abc=document.getElementById('reply_text').value;
_abc=_abc+con;
document.getElementById('reply_text').value=_abc
}
</script>
一楼：张三<a class="pointer" onclick="insert('@张三\n')">回复<a/><br><br>
二楼：李四<a class="pointer" onclick="insert('@李四\n')">回复<a/><br><br>
<textarea id="reply_text" rows="5" cols="20"></textarea>

 

第二步：点击移动光标

代码：

<a onclick="moveEnd(reply_text)">移动光标</a>
<textarea id="reply_text" rows="5" cols="20"></textarea>
<script>
function moveEnd(obj){
    obj.focus();
    var len = obj.value.length;
    if (document.selection) {
        var sel = obj.createTextRange();
        sel.moveStart('character',len);
        sel.collapse();
        sel.select();
    } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
        obj.selectionStart = obj.selectionEnd = len;
    }
}
</script> 
 

 

加在一起后的效果：（点击回复）

一楼：张三回复
二楼：李四回复

全部代码：

<style>
    .pointer {
        margin-left: 50px;
        cursor: pointer;    
        color: #ffa800;
    }
</style>
<script type="text/javascript">
function insert(con)
{var t=document.getElementById('reply_text').value;
t=t+con;
document.getElementById('reply_text').value=t
}

function moveEnd(obj){
    obj.focus();
    var len = obj.value.length;
    if (document.selection) {
        var sel = obj.createTextRange();
        sel.moveStart('character',len);
        sel.collapse();
        sel.select();
    } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
        obj.selectionStart = obj.selectionEnd = len;
    }
}
</script> 
一楼：张三<a class="pointer" onclick="insert('@张三\n'),moveEnd(reply_text)">回复<a/><br><br>
二楼：李四<a class="pointer" onclick="insert('@李四\n'),moveEnd(reply_text)">回复<a/><br><br>
<textarea id="reply_text" rows="5" cols="20"></textarea>

 

 

转载于:https://www.cnblogs.com/ljmin/archive/2012/07/25/2607540.html