过滤剪贴板内容以及定位可编辑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中粘贴内容时过滤剪贴板的内容，光标始终在粘贴内容后面，以及将光标定位到最后的方法的更多相关文章

  1. 基于.Net平台C#的微信网页版API

    git上有很多类似的项目,但大多都是python和js的,为了便于.Net windows平台的使用,我重构了一个.Net版本的,已整理开源 https://github.com/leestar54/ ...

  2. HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

    昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西,突有兴致,想在里面嵌套一 ...

  3. 用requests登录微信网页版，并接收发送消息

    首先,网页版微信登录大致分为以下几个流程(都是大家可以通过抓包得到): 1.登陆主页后,会生成一个UUID,这是个用户标识,在后面请求二维码会用到 def get_uuid(self): '''获取u ...

  4. 微信网页版APP - 网页微信客户端电脑版体验

    微信网页版很早就出来了,解决了很多人上班不能玩手机的问题.微信电脑版-网页微信客户端,直接安装在桌面的微信网页版,免去了开浏览器的麻烦.双击就启动了,和其他的应用程序一样:运行过程中可以隐藏在桌面右下 ...

  5. CROW-5 WEB APP引擎商业计划书（HTML5方向）-微信网页版微信公众平台登录-水仙谷

    CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)

  6. 【开源】SpringBoot&Netty实现仿微信网页版项目更新

    阅读本文约“2.3分钟” 项目更新啦!V1.3.0 还记得那个聊天室的小项目吗? SpringBoot 加 Netty 实现聊天室 没错,这次已经完整进行了版本的替换,酥酥聊天室! 基于原项目的改动, ...

  7. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  8. 微信网页版的onclick事件不起作用

    我的错误是在跳转的url中拼接了url,如下: var myBaseUrl="https://xxx/"; function do() { $.ajax({ url :myBase ...

  9. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

随机推荐

  1. Android轻量级ORM框架ActiveAndroid入门教程(转)

    注:没有找到出处,如有侵犯,请告知 开始ActiveAndroid神奇之旅: 在AndroidManifest.xml中我们需要添加这两个 AA_DB_NAME (数据库名称,这个name不能改,但是 ...

  2. Fedora23 chrome 安装

    添加FZUG源终端:进入到root1.下载google-chrome.repo并保存$wget http://repo.fdzh.org/chrome/google-chrome-mirrors.re ...

  3. 环信EaseUI集成错误 Unknown type name 'NSString' NSLocalizedString

    环信集成本来认为很简单的,有现成的UI,照着文档直接傻瓜操作就行,没曾想聊天记录不能长时间保存,于是乎就有了这篇记录环信坑的笔记 在下载的环信的SDK时候里面会有两个包,一个完整版的,一个简洁版的,导 ...

  4. Swift 类型转换

    1.类型转换 1.1 隐式类型转换 如 C 语言的类型转换 1.2 显式类型转换 Swift 语言是一种强类型语言,其整型的强制类型转换就是调用了参数类型对应的整形扩展构造方法,然后通过对应扩展构造方 ...

  5. 【struts2】继承ActionSupport类

    在Struts2中,Action可以不实现任何特殊的接口或者继承特殊的类,仅仅是一个POJO(Plain Old Java Object,简单的Java对象)就可以:也可以实现Xwork2中的Acti ...

  6. YY老总李学凌给记者们的几句话

    从记者到总编,从狗狗.多玩到如今的 YY.100 教育,似乎李学凌在这么多年来一直没有放缓过脚步.作为记者转型的成功案例,李学凌总结记者生涯有几方面令其获益匪浅: 1.平常心.对待再高层次的人,也用一 ...

  7. Android的 EditText的inputType类型

    android开发过程中突然发现的warning EditText 报出 “This text field does not specify an inputType or a hint”   原因: ...

  8. Oracle 12C -- temporal validity

    temporal validity需要在创建表的时候使用一个vaild-time维度(包含时间起始和结束) 创建有valid-time维度的表 (1)显式指定两个date-time列 SQL> ...

  9. Axure谷歌浏览器Chrome扩展程序下载及安装方法

    对于很多需要设计产品原型的朋友来说,Axure RP Pro可谓是非常方便.好用的一款软件,因为它不仅能绘制出详细的产品构思,也能生成浏览器格式的产品原型.但是如果想把原型拿给客户查看,千万记得给浏览 ...

  10. Android开发实现计算器的例子

    例子 代码如下 复制代码 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" a ...