<!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. Oslo 相机 App

    https://itunes.apple.com/cn/app/osho/id1203312279?mt=8.它支持1:1,4:3,16:9多种分辨率拍摄,滤镜可在取景框的实时预览,拍摄过程可与滤镜实 ...

  2. Jetty使用内存过大的解决方案

    之前用Jetty做过一个消息通知服务器,主要功能就是其他各个子系统如果有需要push给客户端消息的就把这个消息发给我的Server,我用WebSocket来推送给客户端~ 程序上线一段时间之后运维工程 ...

  3. java实现simhash算法

    一个牛人分享的,放在github上,用java实现,网络上还有很多用ruby写的   https://github.com/commoncrawl/commoncrawl/blob/master/sr ...

  4. 【Android】Android 8种对话框(Dialog)

    1.写在前面 Android提供了丰富的Dialog函数,本文介绍最常用的8种对话框的使用方法,包括普通(包含提示消息和按钮).列表.单选.多选.等待.进度条.编辑.自定义等多种形式,将在第2部分介绍 ...

  5. struts2 jsp ueditor 上传图片失败，获取不到值，解决方法

    struts2 ueditor 上传图片获取不到值 有点奇怪的是:涂鸦,网络的图片都可以.就是本地上传不行.(应该是struts2过滤了部分本地上传的信息,导致失败) 在进入到imageUp.jsp中 ...

  6. Kubernetes(k8s) docker集群搭建

    原文地址:https://blog.csdn.net/real_myth/article/details/78719244 一.Kubernetes系列之介绍篇   •Kubernetes介绍 1.背 ...

  7. Swift 类型检查与类型转换

    前言 在 Swift 语言中一般使用 is 关键字实现类型检查,使用 as 关键字实现类型转换,除此之外还可以通过构造器和方法来实现类型转换. 1.类型检查 1.1 使用 is 检查 类型检查操作符 ...

  8. 【Linux】字符转换命令paste

    这个 paste 就要比join 简单多了!相对于 join 必须要比对两个文件的数据相关性, paste 就直接『将两行贴在一起,且中间以 [tab] 键隔开』而已!简单的使用方法: [root@w ...

  9. [MSP430] 对MSP430单片机__delay_cycles精确延时的说明及改正

    在这里, 我来讨论一下关于MSP430单片机使用__delay_cycles延时的问题. IAR for MSP430编译器提供了一个编译器内联的精确延时函数(并非真正的 函数)以提供用户精确延时使用 ...

  10. cygwin ctrl+s的问题

    使用cygwin的时候,因为习惯了ctrl+s保存文档,使用vim时也顺手按下去了,然后cygwin就冻结了. 这个时候可以按下 ctrl+q 来重新激活 cygwin