<!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. iOS 10 的一个重要更新-开发 iMessage 的第三方插件

    苹果官方的 Messages 在 iOS 10 推出了非常重大的更新,可能主要是想从其他 IM 巨头手里抢点市场份额回来,包括 Facebook Messenger, Wechat 和 Snapcha ...

  2. C语言学习笔记 (005) - 二维数组作为函数参数传递剖析

    前言 很多文章不外乎告诉你下面这几种标准的形式,你如果按照它们来用,准没错: //对于一个2行13列int元素的二维数组 //函数f的形参形式 f(int daytab[2][13]) {...} / ...

  3. 【Servlet】使用org.eclipse.jetty实现小型的Servlet服务器

    import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...

  4. 解决安装Egit时Egit Mylyn和org.eclipse.team.core报错

    为了让Aptana支持GitHub,需要安装Egit,但在的时候碰到两个错误,一个是关于缺少EGit Mylyn另一个是缺少org.eclipse.egit.import.feature.group. ...

  5. Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件，可发送多个附件 MVC图片上传详解

    Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全   Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...

  6. label 赋值 ， 隐藏 ， 显示

    <label name='by_stages_number' id='by_stages_number'></label> document.getElementById(&q ...

  7. [ACM] hdu 1253 胜利大逃亡 （三维BFS）

    胜利大逃亡 Problem Description Ignatius被魔王抓走了,有一天魔王出差去了,这但是Ignatius逃亡的好机会. 魔王住在一个城堡里,城堡是一个A*B*C的立方体,能够被表示 ...

  8. java中如何将byte[]里面的数据转换成16进制字符串

    原文链接: http://zhidao.baidu.com/link?url=RmLDjr4PtP_oUE5J2pKNZSvlHt1K7HcCh4-03Y7VkXYhJ0kawg01CtKHZc2uB ...

  9. 基于Android平台的会议室管理系统具体设计说明书

    会议室管理系统具体设计说明书 第一部分  引言 1.编写目的 本说明对会议室管理系统项目的各模块.页面.脚本分别进行了实现层面上的要求和说明. 软件开发小组的产品实现成员应该阅读和參考本说明进行代码的 ...

  10. U811.1接口EAI系列之二-BOM构成-委外BOM构成--VB语言

    1.下面代码实现了VB6.0中调用U8EAI-BOM构成服务,以下代码均为项目实际代码,可直接复制应用. 2.在u811.1版本中委外BOM构成与正常的BOM构成是同系列表,不单独存储. 3.是以存货 ...