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>
缺陷:此方法粘贴时如果连续粘贴会导致光标最后定位出现错误,如果不是连续粘贴同一个剪贴板上的内容不会出现错误,不过,虽然光标位置错误,但是内容粘贴的是正确。这个问题微信网页版同样存在
js实现类似微信网页版在可编辑的div中粘贴内容时过滤剪贴板的内容,光标始终在粘贴内容后面,以及将光标定位到最后的方法的更多相关文章
- 基于.Net平台C#的微信网页版API
git上有很多类似的项目,但大多都是python和js的,为了便于.Net windows平台的使用,我重构了一个.Net版本的,已整理开源 https://github.com/leestar54/ ...
- HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版
昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一 ...
- 用requests登录微信网页版,并接收发送消息
首先,网页版微信登录大致分为以下几个流程(都是大家可以通过抓包得到): 1.登陆主页后,会生成一个UUID,这是个用户标识,在后面请求二维码会用到 def get_uuid(self): '''获取u ...
- 微信网页版APP - 网页微信客户端电脑版体验
微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...
- CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷
CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)
- 【开源】SpringBoot&Netty实现仿微信网页版项目更新
阅读本文约“2.3分钟” 项目更新啦!V1.3.0 还记得那个聊天室的小项目吗? SpringBoot 加 Netty 实现聊天室 没错,这次已经完整进行了版本的替换,酥酥聊天室! 基于原项目的改动, ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- 微信网页版的onclick事件不起作用
我的错误是在跳转的url中拼接了url,如下: var myBaseUrl="https://xxx/"; function do() { $.ajax({ url :myBase ...
- JS在可编辑的div中的光标位置插入内容或表情
<input type="button" value="插入字符" onclick="document.getElementById('test ...
随机推荐
- Java爬虫框架调研
Python中大的爬虫框架有scrapy(风格类似django),pyspider(国产python爬虫框架). 除了Python,Java中也有许多爬虫框架. nutch apache下的开源爬虫程 ...
- ThinkPHP学习(一)
大体看了一下,觉得ThinkPHP真是一个不错的框架.我个人认为使用框架最大的好处是:它给你做了很多事情,而且做得很好! ThinkPHP目前版本到了3.2,没敢用最新的,使用3.1作为学习目标,因为 ...
- JavaScript插件:快速选择日期----jedate日历插件
jedate是一款轻量级JS库,可快速选择日期 http://www.sucaijiayuan.com/Js/DateTime/1371.html 使用方法: 下载jedate , 解压后不要改变文件 ...
- MongoDB 2.6配置副本集,支持端口号修改和用户登录认证
mongoDB系列之(二):mongoDB 副本集 Mongodb2.6副本集验证部署和认证 副本集有以下特点: 1. 最小构成是:primary,secondary,arbiter,一般部署是:pr ...
- Git 打标签(分布式版本控制系统)
前言 像其他版本控制系统(VCS)一样,Git 可以给历史中的某一个提交打上标签,以示重要.比较有代表性的是人们会使用这个功能来标记发布结点(v1.0 等等). 1.列出标签 在 Git 中列出已有的 ...
- 轻量级验证码生成插件webutil-licenseImage源码与实例应用
webutil-licenseImage 插件内置4种验证码样式,支持用户扩展.自定义样式实现简单验证码. 源码脱管地址: http://code.google.com/p/licenseimage/ ...
- 12C的审计模式
1.Mixed Auditing Policy 混合审计模式支持新的审计引擎和老的审计引擎一起工作数据库升级后,已有的审计设置不会受到影响.但是官方建议迁移到统一审计模式.数据库创建后,默认是使用混合 ...
- rhel7 ifconfig command not found
同事扔过来一个rhel7.2的系统,登录后发现没有安装ifconfig命令: # ifconfig -bash: ifconfig: command not found 先看看环境变量: # echo ...
- 5.翻译:EF基础系列---EF中的上下文类
原文地址:http://www.entityframeworktutorial.net/basics/context-class-in-entity-framework.aspx EF中的上下文类是一 ...
- oracle中exists和in的比较
exists 是Oracle sql中的一个函数.表示是否存在符合某种条件的记录.如 select * from A,B where A.id=B.id and exists (SELECT * FR ...