/*——聊天编辑器区域*/

var $editor = $(".J__editorText"), editor = $editor[0];var $face = $(".emotion-area dd img");

$face.on("click", function(e){if($(this).hasClass("face")){ //图像

var img = $(this)[0].cloneNode(true);

editor.focus();

setTimeout(function(){varrange, node;if(document.selection &&document.selection.createRange){

document.selection.createRange().pasteHTML(img);

}else if(window.getSelection &&window.getSelection().getRangeAt){

range= window.getSelection().getRangeAt(0);

range.insertNode(img);

range.collapse(false);var sel =window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

}

},16);

}else if($(this).hasClass("del")){ //删除

editor.focus();

range= window.getSelection().getRangeAt(0);

range.collapse(false);var sel =window.getSelection();

sel.removeAllRanges();

sel.addRange(range);

document.execCommand("delete");

}

});//...格式化编辑器包含标签

editor.addEventListener("focus", function(evt) {

surrounds()

},true);

editor.addEventListener("input", function(evt) {

surrounds();

},false);functionsurrounds() {

setTimeout(function () { //chrome

var sel =window.getSelection();var anchorNode =sel.anchorNode;if (!anchorNode) return;if (sel.anchorNode === editor ||(sel.anchorNode.nodeType=== 3 && sel.anchorNode.parentNode ===editor)) {var range = sel.getRangeAt(0);var p = document.createElement("p");

range.surroundContents(p);

range.selectNodeContents(p);

range.insertNode(document.createElement("br")); //chrome

sel.collapse(p, 0);

(functionclearBr() {var elems =[].slice.call(editor.children);for (var i = 0, len = elems.length; i < len; i++) {var el =elems[i];if (el.tagName.toLowerCase() == "br") {

editor.removeChild(el);

}

}

elems.length= 0;

})();

}

},0);

}//...滚动到聊天内容底部

functionscrollToBottom(){

$('.ws__chatMsg-panel').animate({scrollTop: $("#J__chatMsgList").height()}, 300);

}

h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例相关推荐

  1. h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例代码

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  2. uni-app 关于微信小程序分享,app微信聊天界面和朋友圈分享

    前端小白的uni-app艰难学习之路 微信小程序分享 实现微信小程序分享和app内微信分享 小程序分享很简单,我们通过button的open-type属性 <!-- #ifdef MP-WEIX ...

  3. 解决方案:h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器

    h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器 需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈.这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个 ...

  4. 新版微信开放内测,朋友圈封面配图很重要!

    说正事前,先对昨天的推文莫名被删一事表示心塞塞.文章内容应该没啥问题,估计是标题惹的祸,包含网络敏感字!关于网络这一块,以后还是尽量少提吧. 说回正题,微信客户端悄悄开放内测,放出 6.6.7 新版本 ...

  5. 微信怎么发文字朋友圈?简单快捷的方法,只需1分钟

    微信是一个非常受欢迎的聊天工具,也是一个交友,分享生活的平台.其中,朋友圈是最受欢迎的功能之一,让我们可以与好友分享自己的生活点滴,也能够关注他人的动态.那么微信怎么发文字朋友圈呢?下面跟着小编一起来 ...

  6. 微信附近推和朋友圈广告的区别是什么?

    微信附近推和朋友圈广告都是微信广告,以朋友圈动态第五条的形式展现.那么微信附近推和微信朋友圈广告这两者之间有什么区别呢?首先我们先来了解一下基本概念. 什么是微信附近推? 附近推可以帮助商户将广告投放 ...

  7. angularjs input标签用一个日期插件后数据不能双向绑定了_微信如何定时发朋友圈?(最方便最好用的办法!)...

    微信怎么发朋友圈(微信如何定时发朋友圈)作为一个运营新媒体的小编,很多情况下,我都会遇到定时发文的情况,对于我来说,定时发文很简单. 只要将文案编辑好,使用平台的定时发文功能就可以,所以,我就想,微信 ...

  8. 微信只显示分享朋友圈和好友  屏蔽其他的分享

    wx.hideOptionMenu(); wx.showMenuItems({menuList: ['menuItem:share:appMessage','menuItem:share:timeli ...

  9. 尤里先生查看陌生人朋友圈教程_微信APP看陌生人朋友圈的操作教程

    说到微信APP,估计大家都是熟悉的,那么微信APP看陌生人朋友圈的基础操作各位了解吗?下文就是微信APP看陌生人朋友圈的教程.不懂的各位一起来学习吧! 首先,我们登录微信,打开通讯录. 查找你很久没有 ...

最新文章

  1. vscode编辑器自动格式化
  2. @echo 与 echo的区别
  3. Microsoft Windows Workflow Foundation 4.0 Cookbook
  4. AndroidStudio下载安装教程(图文教程)
  5. 科技部成立新一代人工智能发展研究中心
  6. gin redis 链接不上_php + redis 高并发商品秒杀 完整业务模拟流程 实现方案
  7. 计算机语言由低到高就被分为了什么阶段,2004年4月高等教育自学考试认知心理试题...
  8. c调用python gensim包_Jupyter Notebooks嵌入Excel并使用Python替代VBA宏
  9. ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了(转载)...
  10. android 小学课程,小学课堂(小学学习软件)
  11. 看看人家那后端API接口写得,那叫一个牛逼,再看看我的,像坨屎!
  12. webpack4学习笔记(一)
  13. 基于SpringBoot的房屋租赁管理系统
  14. 2020美赛F奖论文(一):摘要、绪论和模型准备
  15. 基于vscode的vue开发环境搭建
  16. 201871010114-李岩松《面向对象程序设计(java)》第一周学习总结
  17. 服务器硬件上架安装步骤,一般服务器上架步骤;
  18. Codeforces Round #738 (Div. 2) 2021.08.16
  19. Android接收开机广播接收速度慢的原因
  20. Unity中的进度条(内含计数器)

热门文章

  1. 微信、QQ称霸社交,多闪能否上位?
  2. 单周加班-周数2021
  3. 【隐私合规】隐私保护和数据保护合规大合集
  4. 求直线(线段)与直线(线段)的交点
  5. charles mock数据
  6. rpm xnview for linux,Ubuntu 10.04 LTS下载 试用了一下XnView的Linux版
  7. ajaxsetup获取ajax的url_jQuery ajaxSetup() 方法及ajax缓存问题
  8. mybatis快速入门
  9. 树莓派监控系统服务器,在树莓派3上搭建监控系统
  10. 直连获取串口服务器ip,能够进行串口modbusRTU和以太网modbus-TCP协议转换的串口服务器,并提供好用的MODBUS调试工具-专业自动化论坛-中国工控网论坛...