<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div class="popover-content">
   <ul class="list-inline emote_list">
      <li data-key="1f60a" class="emote_item"><img alt="" src="/static/img/emoteicon/1f60a.png"></li>
      <li data-key="1f60d" class="emote_item"><img alt="" src="/static/img/emoteicon/1f60d.png"></li>
      <li data-key="1f618" class="emote_item"><img alt="" src="/static/img/emoteicon/1f618.png"></li>
      <li data-key="1f633" class="emote_item"><img alt="" src="/static/img/emoteicon/1f633.png"></li>
   </ul>
</div>
<textarea placeholder="" class="form-control" id="input_textarea" style="width:100%; height:100px; border:1px solid red"></textarea>
<button class="btn btn-primary" type="button" id="btn_send">发送</button>
</body>
</html>
<script src="jquery.min.js"></script>
<script type="text/javascript">

// 获取光标位置函数
function getCursortPosition(ctrl) {
    var CaretPos = 0;
    if (document.selection) { // IE Support
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { // Firefox support
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
}

$(document).ready(function() {
    $('.emote_item').on('click', function() {
        var k = $(this).data('key'),
        input = $('#input_textarea');
        pos = getCursortPosition(input[0]);
        s = input.val();
        var v = s.substring(0, pos) + '[e]' + k + '[/e]' + s.substring(pos);
        input.val(v);
        input.focus();
       
    });
});
</script>

//第二种插入光标处的插件

//插入光标处的插件
    $.fn.extend({  
        insertContent : function(myValue, t) {

var $t = $(this)[0];  
            if (document.selection) {  
                this.focus();  
                var sel = document.selection.createRange();  
                sel.text = myValue;  
                this.focus();  
                sel.moveStart('character', -l);  
                var wee = sel.text.length;  
                if (arguments.length == 2) {  
                var l = $t.value.length;  
                sel.moveEnd("character", wee + t);  
                t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);  
                sel.select();  
                }  
            } else if ($t.selectionStart || $t.selectionStart == '0') {  
                var startPos = $t.selectionStart;  
                var endPos = $t.selectionEnd;  
                var scrollTop = $t.scrollTop;  
                $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);  
                this.focus();  
                $t.selectionStart = startPos + myValue.length;  
                $t.selectionEnd = startPos + myValue.length;  
                $t.scrollTop = scrollTop;  
                if (arguments.length == 2) {
                    $t.setSelectionRange(startPos - t,$t.selectionEnd + t);  
                    this.focus();
                }  
            } else {                              
                this.value += myValue;                              
                this.focus();  
            }
            var val = $(this).val(),
                that = $(this),
                box = that.parent().prev('.dynamic_info').find('.right');

if(val.length > 140){
                    that.val(val.substring(0, 140));
                    box.html('您还可以输入0字');
                    return false;
                }else{
                    box.html('您还可以输入' + (140 - val.length) + '字');
                }   
        }  
    })
     //插入光标处的插件end

//使用方法：

//当前文本框
var obj = that.parents('.face_content_item').prev('.face_textarea_item').find('.contents');
  //点击表情插入文本框
 $('.jsSmilies li').click(function() {
 var _text = $(this).data('action');
obj.focus();
 obj.insertContent(_text);
  $(this).parents('#xuebox_smilies').hide();
})

js实现类似qq表情（插入图片以及获取光标的效果）的更多相关文章

  1. WinForm实现类似QQ停靠，显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  2. 在asp.net中使用jQuery实现类似QQ网站的图片切割效果

    今天要给大家介绍一个asp.net结合jQuery来切割图片的小程序,原理很简单,大致流程是: 加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> ...

  3. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  4. 经典qq表情插件（html+nodejs应用）

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  5. 在类似qq或者微信聊天中。如何根据不同的手机发送图片

    原文:在类似qq或者微信聊天中.如何根据不同的手机发送图片   前一段时间,公司自己要求做多客服开发,但是对于发送图片这一块,当时很苦恼,我用自己的手机(米2)测试,不管是本地,还是云相册,最新照片. ...

  6. ext js/Ext.Net_演示 htmleditor 上传&插入图片

    本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能   解决方 ...

  7. EditView插入qq表情，可删除表情或文字

    代码如下: 代码如下: package com.push.notif; import java.lang.reflect.Field; import java.util.Random; import ...

  8. js生成二维码以及插入图片

    先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入demo中,审查元素查看里面引用的 ...

  9. WordPress文章中插入qq表情

    看见一些博客中使用了QQ表情,这个效果还是很不错的,可以让文章看起来更爽,那么这个是怎么实现的呢? 下面我就来说说方法. 工具:QQ表情包,下载地址:http://yunpan.cn/cLw6UhwB ...

随机推荐

  1. 利用 WireShark 深入调试网络请求

    来源:伯乐在线 - bestswifter 如有好文章投稿,请点击 → 这里了解详情 背景 最近发现我们产品在打开广告链接(Webview)时有一定概率会非常慢,白屏时间超过 10s,追查广告的过程中 ...

  2. Xcode8 带来的新特性和坑

    Xcode8新特性 Interface Builder 随着14年的iPhone6和6P出来之后,iPhone的屏幕尺寸也越来越多,屏幕适配是一个需要解决的问题,以后不一定苹果又出什么尺寸的iPhon ...

  3. atime,mtime,ctime 的理解

    Linux之atime,mtime,ctime from:http://blog.sina.com.cn/s/blog_5980699f0100zkgz.html 首先可以使用stat 命令来查询文件 ...

  4. SpringMvc4中获取request、response对象的方法

    springMVC4中获取request和response对象有以下两种简单易用的方法: 1.在control层获取 在control层中获取HttpServletRequest和HttpServle ...

  5. 业务、架构、技术，我们应该关注什么 Java和.Net的优势劣势简单看法 市场经济决定，商业之道即是软件之道，市场的需求决定着软件技术的发展 利益决定着选择应用新技术

    业务.架构.技术,我们应该关注什么 一个企业存在的必然和前提就是获取企业生成的利润,怎么样合法合理取得利润呢,企业怎么样生存下去呢,很简单,为客户提供等值的产品与服务,客户支付你相应的报酬. 我们是从 ...

  6. Mac XMPP Openfire 服务器配置

    前言 Openfire 是免费的.开源的.基于可拓展通讯和表示协议(XMPP).采用 Java 编程语言开发的实时协作服务器.Openfire 安装和使用都非常简单,并利用 Web 进行管理.单台服务 ...

  7. .Net jsc.exe 编译js 成exe

  8. numpy的生成网格矩阵 meshgrid()

    numpy模块中的meshgrid函数用来生成网格矩阵,最简单的网格矩阵为二维矩阵 meshgrid函数可以接受 x1, x2,..., xn 等 n 个一维向量,生成 N-D 矩阵. 1 基本语法 ...

  9. mysql join left join区别

    mysql默认的join是inner join,inner join 和 left join的区别看图:

  10. php 将秒数转换为时间（年、天、小时、分、秒）

    $t=1637544; $d=Sec2Time($t); $d为  0年18天 22小时52分24秒 //将秒数转换为时间(年.天.小时.分.秒) function Sec2Time($time){ ...