<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

        <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button>

        <div contentEditable="true" style="height:50px; border:2px solid red;" id="test">&nbsp;</div>

        <script>

            function insertHtmlAtCaret(html) {

                var sel, range;

                if (window.getSelection) {

                // IE9 and non-IE

                sel = window.getSelection();

                if (sel.getRangeAt && sel.rangeCount) {

                range = sel.getRangeAt(0);

                range.deleteContents();

                // Range.createContextualFragment() would be useful here but is

                // non-standard and not supported in all browsers (IE9, for one)

                var el = document.createElement("div");

                el.innerHTML = html;

                var frag = document.createDocumentFragment(), node, lastNode;

                while ( (node = el.firstChild) ) {

                lastNode = frag.appendChild(node);

                }

                range.insertNode(frag);

                // Preserve the selection

                if (lastNode) {

                range = range.cloneRange();

                range.setStartAfter(lastNode);

                range.collapse(true);

                sel.removeAllRanges();

                sel.addRange(range);

                }

                }

                } else if (document.selection && document.selection.type != "Control") {

                // IE < 9

                document.selection.createRange().pasteHTML(html);

                }

}

        </script>

</body>

</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. hdu 2191 (多重背包+二进制优化)

    Problem Description 急!灾区的食物依然短缺!为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都是袋装产品, ...

  2. ar命令提取.a时刻，一个错误 is a fat file (use libtool(1) or lipo(1) and ar(1) on it)

    在减压.a当文件,据报一个类别似 xxx.a is a fat file (use libtool(1) or lipo(1) and ar(1) on it)的错误,经过查找资料,原来是由于该.a文 ...

  3. Cassandra C++/NodeJs开发环境

    工作的需要,开始更多地倾向于去中心化的结构,目前看来Cassandra算是去中心化DB中性能/管理最热门的选择,崇尚其P2P的理念. 自身原因对JAVA不擅长(周围写C的好少),还是更热衷于C++/J ...

  4. OC第四课

    主要内容:NSString.NSArray.NSNumber 一.苹果公司的帮助文档(API) 学会查看API对于后续的编程有很好的帮助 进入方法: Xcode ->Help -> Doc ...

  5. Oracle利用存储过程性 实现分页

    分页的简单配置 在上一次已经说过了 这边说说怎么在存储过程中实现分页 首先建立存储过程 參考 http://www.cnblogs.com/gisdream/archive/2011/11/16/22 ...

  6. 导出DBF，并且提供下载 .

    原文:导出DBF,并且提供下载 . 导出DBF,并且提供下载 #region Declare string mFilePath = MapPath("../DataTmp/");  ...

  7. POJ 2777 Count Color（线段树+位运算）

    题目链接:http://poj.org/problem?id=2777 Description Chosen Problem Solving and Program design as an opti ...

  8. 微软不也是从Altair Basic这丑小鸭长成白天鹅吗?

    微软不也是从Altair Basic这丑小鸭长成白天鹅吗? February 2015 如果你想要弄清楚初创企业是怎么一回事的话,其中一个非常有价值的尝试是去研究下那些获得巨大成功的公司,去分析下为什 ...

  9. 权限设计实现（MVC4+Bootstrap+ PetaPoco+Spring.Net）

    权限设计实现(MVC4+Bootstrap+ PetaPoco+Spring.Net) 一.前言 至毕业后一直在做企业Web开发,做过的项目也有不少,每个项目的框架设计都不是一样,但是每个项目的权限模 ...

  10. 编程乐趣：C#获取日期所在周、月份第一和最后一天

    原文:编程乐趣:C#获取日期所在周.月份第一和最后一天 写了个小功能,需要用到以周为时间段,于是写了个获取周第一和最后一天的方法,获取月份的第一和最后一天就比较简单了.代码如下: public cla ...