1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.         <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button>
  9.         <div contentEditable="true" style="height:50px; border:2px solid red;" id="test">&nbsp;</div>
  10.         <script>
  11.             function insertHtmlAtCaret(html) {
  12.                 var sel, range;
  13.                 if (window.getSelection) {
  14.                 // IE9 and non-IE
  15.                 sel = window.getSelection();
  16.                 if (sel.getRangeAt && sel.rangeCount) {
  17.                 range = sel.getRangeAt(0);
  18.                 range.deleteContents();
  19.  
  20.                 // Range.createContextualFragment() would be useful here but is
  21.                 // non-standard and not supported in all browsers (IE9, for one)
  22.                 var el = document.createElement("div");
  23.                 el.innerHTML = html;
  24.                 var frag = document.createDocumentFragment(), node, lastNode;
  25.                 while ( (node = el.firstChild) ) {
  26.                 lastNode = frag.appendChild(node);
  27.                 }
  28.                 range.insertNode(frag);
  29.  
  30.                 // Preserve the selection
  31.                 if (lastNode) {
  32.                 range = range.cloneRange();
  33.                 range.setStartAfter(lastNode);
  34.                 range.collapse(true);
  35.                 sel.removeAllRanges();
  36.                 sel.addRange(range);
  37.                 }
  38.                 }
  39.                 } else if (document.selection && document.selection.type != "Control") {
  40.                 // IE < 9
  41.                 document.selection.createRange().pasteHTML(html);
  42.                 }
  43. }
  44.         </script>
  45. </body>
  46. </html>

div光标定位问题总结的更多相关文章

  1. js在一个可编辑的div光标处插入图片或者文本（兼容ie，火狐等浏览器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 可编辑DIV 光标位置 处理

    //场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就 ...

  3. ie、火狐、谷歌浏览器，光标定位问题

    IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font-size一致.该行无文字时,光标高度与input的height一致. Chrome:该行无文字时, ...

  4. div 光标处插入内容

    var Manager = { insertHtml: function(html, type) { var lastMemo = document.getElementById("memo ...

  5. div光标

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. 解决replace格式替换后光标定位问题

    场景:格式化银行卡444格式 手机号344格式 身份证号684格式 校验数据格式,replace后光标定位错乱 或光标一直定位在最后 解决,只针对input,代码用的vue: 获取光标位置: getC ...

  7. js实现类似微信网页版在可编辑的div中粘贴内容时过滤剪贴板的内容，光标始终在粘贴内容后面，以及将光标定位到最后的方法

    过滤剪贴板内容以及定位可编辑div光标的方法: <!DOCTYPE html><html lang="en"><head>  <meta ...

  8. DIV 粘贴插入文本或者其他元素后，移动光标到最新处

    此文主要是可编辑div光标位置处理 1:首先 设置一个可编辑的DIV,注意:设置 contenteditable="true" 才可以编辑DIV <div id=" ...

  9. 可编辑DIV与移动端软键盘兼容性问题汇总

    此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...

随机推荐

  1. jquery密码强度检测

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSharp设计模式读书笔记（24）：访问者模式(学习难度：★★★★☆，使用频率：★☆☆☆☆)

    模式角色与结构: 示例代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  3. EasyUI的后台界面

    EasyUI的后台界面搭建及极致重构 〇.前言 要了解一个东西长什么样,至少得让我们能看到,才能提出针对性的见解.所以,为了言之有物,而不是凭空漫谈,我们先从UI说起,后台管理页面的UI我们将使用应用 ...

  4. deb包+软件图标+添加到系统菜单+举例安装卸载

    本文介绍的内容和实验一下: 1. 制造deb包.2. 为了使软件图标.3. 开始菜单中添加到系统中的软件:4. 安装和卸载制作的deb包. 1. 制作deb包 制作deb包的方法可能有多种,本文使用的 ...

  5. 使用Row_Number()分页优化

    记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题   最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且 ...

  6. lua本学习笔记功能

    Lua本学习笔记功能 1.  函数返回 指定任务的主要功能是完成,在这种情况下,函数被用作调用语句.函数可以计算并返回值,在这种情况下,作为分配值表达式语句使用. 语法: funcationfunc_ ...

  7. 快速构建Windows 8风格应用13-SearchContract构建

    原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...

  8. SQL点滴9—SQL Server中的事务处理以及SSIS中的内建事务

    原文:SQL点滴9-SQL Server中的事务处理以及SSIS中的内建事务 我们可以把SSIS中的整个package包含在一个事务中,但是如果在package的执行过程中有一个表需要锁定应该怎么处理 ...

  9. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  10. leetcode[60] Rotate List

    题目:给定链表,和一个k,把链表的后k个旋转到前头,例如链表为: 1->2->3->4->5->NULL and k = 2, return 4->5->1- ...