代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Js
】
实现类似微信网页版在可编辑的div中粘贴内容时过滤剪
作者:
秀清
/ 发布于
2016/6/15
/
737
过滤剪贴板内容以及定位可编辑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> 缺陷:此方法粘贴时如果连续粘贴会导致光标最后定位出现错误,如果不是连续粘贴同一个剪贴板上的内容不会出现错误,不过,虽然光标位置错误,但是内容粘贴的是正确。这个问题微信网页版同样存在
试试其它关键字
同语言下
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
可能有用的
.
Jquery搜索框获取回车事件
.
H5页面添加倒计时,然后自动跳转
.
通过user-agent判断h5页面是在哪个手机App(QQ、微信
.
nginx 禁止未绑定的域名访问
.
JavaScript 获取按键,并屏蔽系统 Window 事件
.
H5之只允许微信浏览器打开,禁止从外部浏览器访问
.
微信打开网址添加在浏览器中打开提示的办法
.
实现JS复制、粘贴,Chrome/Firefox下可用
.
video视频播放,play()、pause()、duration时长、onen
.
HTML5实现MP3上传前的预览和播放时长的获取
秀清
贡献的其它代码
(
25
)
.
把网站的html文件中的http替换成https
.
验证手机号、密码、短信验证码
.
将一个字符串格式化为每间隔指定长度插入一个分隔符,
.
hive开启简单模式不启用mr
.
区间分组统计
.
FtpUtil 工具类使用
.
FileUtil,文件操作工具类
.
实现类似微信网页版在可编辑的div中粘贴内容时过滤剪
.
使用多个属性来进行过滤
.
检测邮箱地址是否合法
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3