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 ...
随机推荐
- 【RS】Local Latent Space Models for Top- N Recommendation-利用局部隐含空间模型进行Top-N推荐
[论文标题]Local Latent Space Models for Top- N Recommendation (KDD-2018 ) [论文作者]—Evangelia Christakopou ...
- 重写Checkbox 改写选择框的大小
/* 作者:Starts_2000 * 日期:2009-07-30 * 网站:http://www.csharpwin.com CS 程序员之窗. * 你可以免费使用或修改以下代码,但请保留版权信息. ...
- nginx配置文件结构,语法,配置命令解释
摘要: nginx的配置文件类似于一门优雅的编程语言,弄懂了它的规范就可以自定义配置文件了,这个很重要~ 1,结构分析 nginx配置文件中主要包括六块:main,events,http,server ...
- RVM Ruby 管理工具
1.RVM 简介 1.1 Ruby 简介 Ruby 是一种面向对象的脚本语言,简单易用,功能强大.能跨平台和可移植性好等等.其实就是种脚本语言. Ruby 的软件源使用的是亚马逊的云服务,国内网络环境 ...
- Git 获取仓库(分布式版本控制系统)
1.在现有目录中初始化仓库 如果你打算使用 Git 来对现有的项目进行管理,你只需要进入该项目目录并输入以下命令. # 初始化仓库 $ git init 该命令将创建一个名为 .git 的子目录,这个 ...
- 关于VC++的增量链接(Incremental Linking)
增量链接(Incremental Linking)这个词语在使用Visual C++时经常会遇到(其实不只是VS系列,其它链接器也有这个特性), 就比如经常遇到的:上一个增量链接没有生成它, 正在执行 ...
- 【SDOI2014】【BZOJ3529】数表
Description 有一张N×m的数表,其第i行第j列(1 < =i < =礼.1 < =j < =m)的数值为 能同一时候整除i和j的全部自然数之和.给定a,计算数表中不 ...
- 带你开发一款给Apk中自己主动注入代码工具icodetools(开凿篇)
一.前言 从这篇開始咋们開始一个全新的静态方式逆向工具icodetools的实现过程.这个也是我自己第一次写的个人认为比較实用的小工具,特别是在静态方式逆向apk找关键点的时候.兴许会分为三篇来具体介 ...
- C++中的#和##运算符
#和##运算符 #:构串操作符 构串操作符#只能修饰带参数的宏的形参,它将实参的字符序列(而不是实参代表的值)转换成字符串常量 #define STRING(x) #x#x#x #define TEX ...
- MPU6050陀螺仪和加速度计的校准
加速度计和陀螺仪的校准: 在传感器静止不动水平放置时,测出陀螺仪和加速度计各轴的偏移值,保存.以后每次上电调用dmp_set_xx_bias()就行了. u8 run_self_test(void) ...