zoukankan      html  css  js  c++  java
  • 博客园评论(回复、引用)的实现

    使用过博客园评论功能的人都知道,点击回复,光标会移到文本框里并在文本框加入@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>
  • 相关阅读:
    Oracle+PL+SQL从入门到精通.丁士锋.清华大学出版社.2012
    《 Oracle查询优化改写 技巧与案例 》电子工业出版社
    HTML5从入门到精通(明日科技) 中文pdf扫描版
    《JavaWeb从入门到精通》(明日科技,清华大学出版社)
    JavaScript从入门到精通(附光盘1张):作者:明日科技出版社:清华大学出版社出版时间:2012年09月
    ORACLE_修改实例的内存大小
    JAVA图书管理系统汇总共27个
    IntelliJ Idea 2017 免费激活方法
    spring springMvc spring-boot spring-cloud分别是什么
    nodejs环境 + 入门 + 博客搭建
  • 原文地址:https://www.cnblogs.com/ljmin/p/2607540.html
Copyright © 2011-2022 走看看