<!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. Android Volley彻底解决(三)，定制自己Request

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17612763 经过前面两篇文章的学习,我们已经掌握了Volley各种Request ...

  2. maven_修改setting ,改为自己私服或者OSC开源中国 [为解决sqlite-jdbc 在中央仓库找不到]

    因为项目要使用到sqlite ,虽然有现成的jar,但是考虑的项目的易用统一管理,决定还是用maven 结果纠结了半天 sqlite-jdbc 在maven默认的仓库根本找不着,于是乎修改 setti ...

  3. 【设计模式】Abstract Factory模式

    抽象工厂模式是工厂方法模式的进一步强化.当工厂函数仅仅须要产生一种类型的产品(全部产品都继承自同一抽象基类)时,使用工厂方法模式就可以. 可是.当用户程序须要创建多种类型的产品,而这些产品又有一定的内 ...

  4. vector查找元素

    转自:http://hi.baidu.com/chain2008/blog/item/821744585e12c5c89c8204e8.html 今天又忘了怎么在vector中查找某一个值..唉..每 ...

  5. 网站静态化处理—web前端优化—下【终篇】（13）

    网站静态化处理—web前端优化—下[终篇](13) 本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部, ...

  6. 登录记住账号和密码小Demo

    读取 // 1.读取沙盒中plist文件 // 1.1.获得沙盒根路径 NSString *home = NSHomeDirectory(); // 1.2.拼接Documents路径 NSStrin ...

  7. android网络操作使用汇总（http）

    Android是作为智能手机的操作系统,我们开发的应用,大多数也都须要连接网络,通过网络发送数据.获取数据,因此作为一个应用开发人员必须熟悉怎么进行网络訪问与连接. 通常android中进行网络连接通 ...

  8. Linux httpd 跳转简单方法一

    直接在httpd.conf中添加以下代码即可: NameVirtualHost *:80 <VirtualHost *:80> ServerName localhost ##访问域名 Re ...

  9. C#正则学习

    正则的力量无法小觑,短短的几个字符,往往胜过几十行的代码,大大可以简化我们冗余的代码. 以前在js里用正则比较多,今天来熟悉下C#中正则的使用方法,权当笔记了! 如果把正则当做一门语言的话,那么正则的 ...

  10. 【hoj】2651 pie 二分查找

    二分查找是一个非常主要的算法,针对的是有序的数列,通过中间值的大小来推断接下来查找的是左半段还是右半段,直到中间值的大小等于要找到的数时或者中间值满足一定的条件就返回,所以当有些问题要求在一定范围内找 ...