js实现类似微信网页版在可编辑的div中粘贴内容时过滤剪贴板的内容,光标始终在粘贴内容后面,以及将光标定位到最后的方法
过滤剪贴板内容以及定位可编辑div光标的方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
.box{ width:500px; height:300px; border:1px solid #ddd; word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/white-space:normal; }
</style>
</head>
<body>
<div contenteditable="true" class="box" id="editArea"></div>
<button id="button">光标定位到最后</button>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#editArea').bind('paste',function(){
var e = this, s,
r = e.innerHTML;
s && clearTimeout(s),
s = setTimeout(function() {
for (var c = e.innerHTML, l = -1, u = -1, f = 0, d = c.length; d > f && ( - 1 == l && r.substr(f, 1) != c.substr(f, 1) && (l = f), -1 == u && r.substr(r.length - f - 1, 1) != c.substr(c.length - f - 1, 1) && (u = f), !( - 1 != l && -1 != u || l >= d - 1 - u)); ++f);
if ( - 1 != l && -1 != u) {
if (u = d - 1 - u, l >= u) {
f = l;
for (var g = r.substr(f + 1, 10); ++f < d;) if (g == c.substr(f, g.length)) {
u = f;
break
}
f == d && (u = d - 1)
}
"<" == c.substr(l - 1, 1) && --l,
">" == c.substr(u + 1, 1) && ++u;
var m = c.substring(l, u + 1),
p = c.substr(0, l),
h = c.substr(l + m.length),
M = p.lastIndexOf("<"),
y = p.lastIndexOf(">");
if (M > y && (m = p.slice(M) + m, p = p.slice(0, M)), M = m.lastIndexOf("<"), y = m.lastIndexOf(">"), M > y) {
var C = h.indexOf(">") + 1;
m += h.slice(0, C),
h = h.slice(C)
}
var _ = m.replace(/<[^>]+>/g, "");
e.innerHTML = p + _ + "<span class='pasteCaretPosHelper'></span>" + h;
var v, w, S = $(e).find(".pasteCaretPosHelper")[0];
S && (document.createRange ? (v = document.createRange(), v.setStartAfter(S), v.collapse(!1), w = window.getSelection(), w.removeAllRanges(), w.addRange(v)) : document.selection && (v = document.body.createTextRange(), v.moveToElementText(S), v.collapse(!1), v.select()), S.parentNode.removeChild(S))
}
},50)
})
$('#button').click(function(){
po_Last_Div('editArea')
})
})
function po_Last_Div(obj) {
var obj = document.getElementById(obj);
if (window.getSelection) {//ie11 10 9 ff safari
obj.focus(); //解决ff不获取焦点无法定位问题
var range = window.getSelection();//创建range
range.selectAllChildren(obj);//range 选择obj下所有子内容
range.collapseToEnd();//光标移至最后
}
else if (document.selection) {//ie10 9 8 7 6 5
var range = document.selection.createRange();//创建选择对象
//var range = document.body.createTextRange();
range.moveToElementText(obj);//range定位到obj
range.collapse(false);//光标移至最后
range.select();
}
}
</script>
缺陷:此方法粘贴时如果连续粘贴会导致光标最后定位出现错误,如果不是连续粘贴同一个剪贴板上的内容不会出现错误,不过,虽然光标位置错误,但是内容粘贴的是正确。这个问题微信网页版同样存在
最新文章
- UDS(ISO14229-2006) 汉译(No.7 应用层协议)【未完,待续】
- Flyme适配源码更新命令,轻松完成打包
- Unix系统引导过程(简单步骤)
- 一键搭建vpn服务器
- Element selector doesn&#39;t have required
- Bootstrapper.cs
- 透过WebGL 3D看动画Easing函数本质
- Linux 进程通信(有名管道)
- IIS 7.5 配置10W高并发
- 14个Xcode中常用的快捷键操作
- QListWidget方式显示缩略图
- NOI2007 生成树计数
- Thrift框架简介
- zabbix server安装详解
- 深入分析Java的String类的方法与特点
- phpstorm 快捷键高效助手扩展 常用快捷键收集整理 2018-04-12 16:42:10
- java双重检测或枚举类实现线程安全单例(懒汉模式)
- 五十五、linux 编程——TCP 连接和关闭过程及服务器的并发处理
- 再谈Retina下1px的解决方案
- ES6躬行记(8)——数字
热门文章
- Pinyin4j导读
- 合格linux运维人员必会的30道shell编程面试题及讲解
- linux 文件系统工作原理
- 专注做好一件事(转) focus---这个世界上最成功的人,他们在某一领域获得成功之后,可通过经营杠杆进入任何他们想要涉足的领域。而这都得依赖于他们曾极致的专注在做好一件事情上。
- android 蓝牙编程重点---如何发送和接收16进制数据
- CentOS7.2安装pure-ftpd 及其配置项
- Oracle 11g安装,新建表空间和用户
- 修改eclipse.ini文件指定jdk
- django 用户管理系列:1 user
- 硬盘 SMART 检测参数详解[转]