html表情选择器,原生JS写的emoji表情选择器
//生成表情
window.onload = function() {var face = document.getElementById(‘face‘);for(var i = 0; i < 38; i++) {var a = document.createElement("a");
a.href= "javascript:;";if(i < 10) {
a.innerHTML= ‘‘;
}else{
a.innerHTML= ‘‘;
}
face.appendChild(a);
};
}//点击插入表情
setTimeout(function() {var pickers = face.getElementsByTagName(‘a‘);var emojiInput = document.getElementById(‘emojiInput‘);for(var i = 0; i < pickers.length; i++) {
pickers[i].οnclick= function(e) {document.getElementById(‘emojiInput‘).focus();
insertHtmlAtCaret(this.innerHTML);//emojiInput.innerHTML+=this.innerHTML;
}
}functioninsertHtmlAtCaret(html) {varsel, range;if(window.getSelection) {//IE9 and non-IE
sel =window.getSelection();if(sel.getRangeAt &&sel.rangeCount) {
range= sel.getRangeAt(0);
range.deleteContents();//Range.createContextualFragment() would be useful here but is
//non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML=html;var frag =document.createDocumentFragment(),
node, lastNode;while((node =el.firstChild)) {
lastNode=frag.appendChild(node);
}
range.insertNode(frag);//Preserve the selection
if(lastNode) {
range=range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}else if(document.selection && document.selection.type != "Control") {//IE < 9
document.selection.createRange().pasteHTML(html);
}
}
},500);
html表情选择器,原生JS写的emoji表情选择器相关推荐
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
- HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌)
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
- 原生JS写仿淘宝搜索框(代码+效果),可实现3级搜索哦!
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
- 用javascript写一个emoji表情插件
概述 以我们写的这个emoji插件为例,网上已经有一些相关的插件了,但你总感觉有些部分的需求不能被满足(如:可以自行添加新的表情包而不用去改源代码等等) 详细 代码下载:http://www.demo ...
- vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- java过滤ios表情,JS前端去掉emoji表情和Java后台处理emoji表情方法
莫非定律 : 任何事情都没表面看去来那么简单! emoji表情在项目中使用,因为其特殊的编码格式,经常导致在网络传输.编解码.以及数据入库中带来一些问题! 下面简单介绍使用Js和java处理移除emo ...
- 用原生JS写一个网页版的2048小游戏(兼容移动端)
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
- html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
最新文章
- C语言两种查找方式(分块查找,二分法)
- C#预处理符号—C#基础回顾
- Flex Basis与Width的区别
- cd协议属于计算机网络的应用层,计算机网络 题库 必考 期末 期终 考试 复习 考研 必备...
- 实战分享|数据驱动「付费转化」的3个思路
- String str=“i“与 String str=new String(“i”)一样吗?
- java泛型区间_JAVA 14(泛型)
- Docker的Hadoop-Hbase的 Docker Hub文档
- linux centos7.9图形界面版本下载_适合在任何地方使用的 Linux:15 个小型 Linux 发行版...
- Xcode app修改项目名
- 心法利器[24] | 以pytorch为例看我怎么自学新技术的
- Spring Security系列(一)——登录认证基本配置
- linux 软件包kbd 位置,1.10.42 6.42. Kbd-1.12 - Linux 系统构建指南
- 基于QT的人脸识别考勤管理系统【一】
- google翻译不能用后chrome浏览器如何翻译网页
- gdc服务器硬盘修复,GDC硬盘检测、阵列新建和修复.pptx
- 批处理删除重复的文件
- 整理的一篇iOS面试题大全
- LeetCode 剑指 Offer II 前缀树(上) 专题总结
- Type safety: The expression of type List needs unchecked conversion to conform to List<TagFormal>
热门文章
- python django部署docker_centos利用docker部署django项目
- python爬虫反爬对抗_python爬虫反反爬,你几乎可以横扫大部分 css 字体加密的网站...
- html注册跳转php错误500,页面跳转后提示HTTP 异常 500(Internal Server Error):服务器尝试执行请求时遇到了意外情况...
- python随机数模块_python 随机数模块 -- random
- 计算机入门在线阅读,电脑入门基础教程..doc
- InstallShield 2020
- python连接数据库并编写调用函数_Python使用pyodbc访问数据库操作方法详解
- git 每次都要输入用户名密码_Git向GitHub提供代码
- 【转】ABP源码分析四:Configuration
- 【转】刨根究底字符编码之九——字符编码方案的演变与字节序