兼容主流浏览器的【表情插入】源码(转）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UBB表情的插入</title>
<style type="text/css">
* {margin:0; padding:0;}
body {font:12px/1.3 Arial, Helvetica, sans-serif; background-color:#FFFFFF;}
ul, li {list-style:none}
img {border:none}
.container {margin:30px;}
#txtDemo {width:475px; height:110px; word-break:break-all; word-wrap:break-word;}
#facePanel {border-width:1px 2px 2px 1px; border-color: #CCCCCC; border-style:solid; -webkit-border-radius: 6px; -moz-border-radius:6px; padding:6px; width:330px; margin-top:5px; display:none;}
#facePanel li{float:left; width:28px; height:28px; padding:0 5px 5px 0;}
#facePanel li a {display:block; text-decoration:none; border:1px dashed #DDD; width:26px; height:26px; line-height:26px; overflow:hidden; text-align:center;}
#facePanel li a:hover {border-color:#999;}
#facePanel li a span {display:inline-block;}
#facePanel li a img {vertical-align:middle;}
#facePanel ul {zoom:1;}
#facePanel ul:after{ content:"\0020"; display:block; height:0; line-height:0; clear:both; visibility:hidden;}
</style>
</head>
<body>
<div class="container">
<div>
<textarea id="txtDemo"></textarea>
</div>
<button οnclick="showFace(event);">插入表情</button>
<div id="facePanel">sadf</div>
</div>
<script type="text/javascript">
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
function addEvent(el, type, handler) {
if(el.attachEvent) {
el.attachEvent("on" + type, handler);
} else if(el.addEventListener) {
el.addEventListener(type, handler, false);
}
}
function removeEvent(el, type, handler) {
if(el.detachEvent) {
el.detachEvent('on' + type, handler);
} else if(el.removeEventListener) {
el.removeEventListener(type, handler, false);
}
}
var faceInited = false;
//显示表情
function showFace(ev) {
if(!faceInited) {
initFace();
}
var facePanel= $("facePanel");
facePanel.style.display = "block";
addEvent(document.body, 'click', hideFace);
addEvent(facePanel, 'click', cancelEventBubble);
cancelEventBubble(ev);
}
//隐藏表情
function hideFace() {
$("facePanel").style.display = "none";
removeEvent(document.body, 'click', hideFace);
removeEvent($("facePanel"), 'click', cancelEventBubble);
}
//插入表情
function insertFace(elem) {
var txtElem = $("txtDemo"),
range = txtElem.getAttribute("range") ? txtElem.getAttribute("range").split("|") : [0, 0];
var str_1 = txtElem.value.slice(0, range[0]);
var str_2 = txtElem.value.slice(range[1]);
txtElem.value = str_1 + elem.getAttribute("value") + str_2;
if(!document.selection) {
txtElem.selectionStart = txtElem.value.length;
txtElem.selectionEnd = txtElem.value.length;
} else {
var range = txtElem.createTextRange();
range.collapse(1);
range.moveStart("character", txtElem.value.length);
range.moveEnd("character", txtElem.value.length);
range.select();
}
txtElem.focus();
hideFace();
}
//取消事件冒泡
function cancelEventBubble(ev) {
ev = ev || window.event;
if(ev.stopPropagation) {
ev.stopPropagation();
} else if(!ev.cancelBubble) {
ev.cancelBubble = true;
}
}
//记录textarea的选区的start&end
function savePos() {
var elem = $("txtDemo"),
range = getRange(elem);//获取选区
elem.setAttribute("range", range.join("|"));
document.title = "start:" + range[0] + "--" + "end:" + range[1];
cancelEventBubble(arguments[0] || window.event);
}
!(function() {
var txtElem = $("txtDemo");
addEvent(txtElem, 'focus', savePos);
addEvent(txtElem, 'mouseup', savePos);
addEvent(txtElem, 'keyup', savePos);
addEvent(txtElem, 'mousemove', savePos);//Chrome 在选中文本域内的文字时，不能触发mouseup事件，导致range依旧为最近一次的range
})();
//初始化表情
function initFace() {
var faces = [{"icon":"\u8db3\u7403","value":"[\u8db3\u7403]","src":"basic\/football.gif"},{"icon":"\u54e8\u5b50","value":"[\u54e8\u5b50]","src":"basic\/shao.gif"},{"icon":"\u7ea2\u724c","value":"[\u7ea2\u724c]","src":"basic\/redcard.gif"},{"icon":"\u9ec4\u724c","value":"[\u9ec4\u724c]","src":"basic\/yellowcard.gif"},{"icon":"\u54c8\u54c8","value":"[\u54c8\u54c8]","src":"basic\/laugh.gif"},{"icon":"\u5475\u5475","value":"[\u5475\u5475]","src":"basic\/smile.gif"},{"icon":"\u6cea","value":"[\u6cea]","src":"basic\/cry.gif"},{"icon":"\u6c57","value":"[\u6c57]","src":"basic\/sweat.gif"},{"icon":"\u7231\u4f60","value":"[\u7231\u4f60]","src":"basic\/love.gif"},{"icon":"\u563b\u563b","value":"[\u563b\u563b]","src":"basic\/tooth.gif"},{"icon":"\u54fc","value":"[\u54fc]","src":"basic\/hate.gif"},{"icon":"\u5fc3","value":"[\u5fc3]","src":"basic\/heart.gif"},{"icon":"\u6655","value":"[\u6655]","src":"basic\/dizzy.gif"},{"icon":"\u6012","value":"[\u6012]","src":"basic\/angry.gif"},{"icon":"\u86cb\u7cd5","value":"[\u86cb\u7cd5]","src":"basic\/cake.gif"},{"icon":"\u82b1","value":"[\u82b1]","src":"basic\/flower.gif"},{"icon":"\u6293\u72c2","value":"[\u6293\u72c2]","src":"basic\/crazy.gif"},{"icon":"\u56f0","value":"[\u56f0]","src":"basic\/sleepy.gif"},{"icon":"\u5e72\u676f","value":"[\u5e72\u676f]","src":"basic\/cheer.gif"},{"icon":"\u592a\u9633","value":"[\u592a\u9633]","src":"basic\/sun.gif"},{"icon":"\u4e0b\u96e8","value":"[\u4e0b\u96e8]","src":"basic\/rain.gif"},{"icon":"\u4f24\u5fc3","value":"[\u4f24\u5fc3]","src":"basic\/sad.gif"},{"icon":"\u6708\u4eae","value":"[\u6708\u4eae]","src":"basic\/moon.gif"},{"icon":"\u732a\u5934","value":"[\u732a\u5934]","src":"basic\/pig.gif"},{"icon":"\u8721\u70db","value":"[\u8721\u70db]","src":"basic\/candle.gif"}];
var imgURI = "http://timg.sjs.sinajs.cn/miniblog2style/images/common/face/";
var tempArr = [];
tempArr.push('<ul>');
for(var i=0, len = faces.length; i<len; i++) {
tempArr.push([
'<li><a href="javascript:;" hideFocus="true" οnclick="insertFace(this);return false;" value="' + faces[i].value + '" title="' + faces[i].icon + '"><img src="' + imgURI + faces[i].src + '" alt="' + faces[i].icon + '" /><span> </span></a></li>',
].join(""));
}
tempArr.push('</ul>');
$("facePanel").innerHTML = tempArr.join("");
}
//获取选区
function getRange(elem) {
var start = 0, end = 0;
if(!document.selection) {
start = elem.selectionStart;
end = elem.selectionEnd;
} else if(document.selection) {
var range = document.selection.createRange(),
range_all = document.body.createTextRange(),
i = 0;
range_all.moveToElementText(elem);
for(; range_all.compareEndPoints("StartToStart", range) < 0; start++) {
range_all.moveStart('character', 1);
}
for(; i<start; i++) {
if(elem.value.charAt(i) == "\n") {
start++;
}
}
range_all = document.body.createTextRange();
range_all.moveToElementText(elem);
for(; range_all.compareEndPoints('StartToEnd', range) < 0; end++) {
range_all.moveStart('character', 1);
}
for(i=0; i <= end; i++) {
if(elem.value.charAt(i) == "\n") {
end++;
}
}
}
return [start, end];
}
</script>
</body>
</html>
兼容主流浏览器的【表情插入】源码(转）相关推荐
- Via浏览器怎么查看网页源码
Via浏览器怎么查看网页源码?Via浏览器是一款非常不错的手机主页浏览软件,该软件功能强大,除了基本的主页浏览之外,它还可以帮助用户进行在线资源的嗅探,并且还可以直接在手机上进行网页源码的查看.下面小 ...
- 将内容复制到剪切板兼容主流浏览器的解决方案
html : <body><div class="demo-area"><label for="copy-input">输入 ...
- android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码...
Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
- android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码
Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
- 每次启动项目的服务，电脑竟然乖乖的帮我打开了浏览器，100行源码揭秘！
1. 前言 大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步. 想学源码,极力推荐之前我写的<学习源码整体架 ...
- via浏览器简洁主页html源码 支持搜索提示
简介: via浏览器简洁主页源码支持搜索提示,扒的一个简洁好看的via浏览器主页源码,纯html+js无后端源码分享给大家,放到服务器即可运行. 网盘下载地址: http://kekewl.cc/AL ...
- 用你的浏览器来静态分析网站源码——初级漏洞赏金猎人指南
原文链接:https://medium.com/@_bl4de/how-to-perform-the-static-analysis-of-website-source-code-with-the-b ...
- html5+php视频播放器,一个好用的html视频播放器兼容主流浏览器
最近工作上的需求需要对移动客户端上发送的视频在网页上播放,and 上传视频并在网页上播放(例如上传教学视频或者动态分享等)(博主碎碎念:移动客户端上传的你不会用手机的播放器看啊,网页上上传你不会上传到 ...
- js 下载Base64格式数据图片（兼容主流浏览器）
最近的工作内容和前端有关.需要做一个图片下载的功能,然而后台只提供了byte[] 类型的图片数据,并且返回给前端的是Base64格式图片数据.那么,就遇到了最严重的问题了:浏览器兼容. 展示图片的时 ...
- 浏览器打开jsp显示源码
这是我所遇到的情况,并不适用于所有人 我在发现显示源码,无法编译为html语言后,网上百度了很多方法都无法解决问题 只能在eclipse里面运行出来 而网页只显示源码 最后是解决了,问的老师,过程辛酸 ...
最新文章
- Hadoop API文档地址
- Angular动态创建组件之Portals
- php alert弹框按钮,PHP 实现类似js中alert() 提示框
- trace--求矩阵的迹
- OAuth2.0学习（1-1）OAuth2.0是什么？
- GraphPad Prism 的统计显著性报告中*或**或**的含义是什么？
- OpenCASCADE：使用扩展数据交换 XDE之保存视图
- 判断单链表中的元素是否递增_检测单链表中是否有环（C语言）
- python—PIL使用
- 设计模式之十三：适配器模式(Adapter)
- C语言游戏开发——打飞机游戏1.0
- DroidCam使用安卓手机当电脑摄像头
- JDK8下载 (jdk-8u271-windows-x64和jdk-8u271-linux-x64.tar)
- 同样硬件安装不同操作系统：Win7和Win10对于同一段程序源码的编译速度不同
- 亚马逊运营实用教程 上线前三个月如何做
- 关闭防火墙步骤（详细）
- mysql日期函数之DATEDIFF（） if()用法 case when用法
- 可扩展标记语言XML（淅淅沥沥的小雨）
- 三跨考研浙江大学计算机,“三跨”考研的焦虑 你能承受多少
- js执行oracle函数吗,执行javascript函数