<!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. C语言终极面试及答案分析

    第一部分:基本概念及其它问答题 .关键字static的作用是什么? 这个简单的问题很少有人能回答完全.在C语言中,关键字static有三个明显的作用: ). 在函数体,一个被声明为静态的变量在这一函数 ...

  2. 彻底解决asp.net mvc5.2.2：vs2013 cshtml视图文件报错（当前上下文中不存在名称“model”，ViewBag，Url）

    最近遇到一个奇葩的问题,在vs2013下cshtml视图文件报错,出现当前上下文中不存在名称“model”,ViewBag,Url等等),在视图中也没有智能提示了,用@model声明视图的model类 ...

  3. 【C#】反编译C#应用程序

    下面的使用的使用是笔者使用的一个简单的程序,就是弹出一个消息框. 这里通过 ildasm 反编译 应用程序得到 il 文件,然后对 il 文件进行修改,修改内容后,再通过ilasm编译为应用程序.il ...

  4. 【Android开发】之Fragment生命周期

    上一篇博客我们讲到了,Fragment的基本使用,相信大家都已经了解怎么去使用了.如果还有不懂得同学可以去看一下,传送门.现在我们来讲解一下Fragment的生命周期. 一.Fragment的事务 再 ...

  5. Spring Cloud启动应用时指定IP或忽略某张网卡配置

    说明:分布式应用部署到服务上,由于服务器可能存在多张网卡,造成IP地址不准的问题. 解决方法: 1.直接添加忽略某张网卡的配置: spring.cloud.inetutils.ignored-inte ...

  6. git web开发版本管理

    使用git来管理web开发: 我们需要做的事情 : 1,在服务器建立版本仓库: 2,在服务器建立稳定版本的站点,编写版本仓库的hooks: 3,在开发服务器上提交开发版本: 下面一步一步来:(注意建立 ...

  7. Extending a logical volume in a virtual machine running Red Hat or Cent OS (1006371)

    Purpose This article provides steps for extending the root partition residing in a logical volume cr ...

  8. cassandra java 兼容性问题及其解决方法

    1.安装 http://wiki.apache.org/cassandra/DebianPackaging 2.java兼容性问题 由于cassandra运行于sun jdk6上,而ubuntu默认是 ...

  9. proguard的简单配置说明

    #需要转换的jar文件路径-injars 'D:\fs-np.jar'#转换后的jar文件名称-outjars 'D:\fs-np-sec.jar' #关联的第三方jar-libraryjars 'C ...

  10. systemd自启动java程序

    一.背景条件 1. Linux系统是Debian 8 2. Java程序是test.jar,安装路径是/home/test/test.jar 二.编写java的启动脚本 startTest.sh #! ...