<!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控制文件：ViewPager+Fragment+GridView使用（与AndroidQuery框架结合）

    最近我看到一个AndroidQuery该框架.里面Demo,有一个屏幕,让博主喜欢.很顺利的左右滑动,感觉非常好,所以拿来和大家分享一下.看看结果图.: 从图中能够看出.上面的布局是一个Layout里 ...

  2. HDU 1042 N! 參考代码

    HDU 1042 N! 题意:给定整数N(0 ≤ N ≤ 10000), 求 N! (题目链接) #include <iostream> using namespace std; //每一 ...

  3. 两个容易被忽略的mysql知识

    原文:两个容易被忽略的mysql知识 为什么标题要起这个名字呢?commen sence指的是那些大家都应该知道的事情,但往往大家又会会略这些东西,或者对这些东西一知半解,今天我总结下自己在mysql ...

  4. 抄360于Launcher浮动窗口的屏幕显示内存使用情况(改进版)

    MainActivity例如下列: package cc.cc; import android.os.Bundle; import android.view.View; import android. ...

  5. wget一个小技巧

    今天在装一个东西的时候,在网上看到了这样的命令 wget  http://xxxx.sh -o -  | sh  的用法 不太明白-o -的用法于是乎man wget,看到了下面的一段话 -O fil ...

  6. Swift入门教程:基本语法(四)

    可选类型 可选类型的使用场合 当一个值可能存在,可能不存在的时候,就用可选类型 比如查找字符k在某个字符串中的位置 如果字符串是"jake",说明k的位置存在,是2 如果字符串是& ...

  7. C#备份还原MySql数据库

    原文:C#备份还原MySql数据库 项目结束,粘点代码出来让Google或Baidu一下,原因是现在还搜不到这么现成的 调用MySql的工具mysqldump来实现. 类Cmd来实现调用cmd命令, ...

  8. 如何实现TWaver 3D颜色渐变

    一般而言,须要实现3D物体的渐变,通常的思路就是通过2D绘制一张渐变canvas图片作为3D对象的贴图.这样的方式是能够解决这类问题的.只是对于一般用户而言,通过2D生成一张渐变的图片.有一定的难度, ...

  9. POJ 1028 Web Navigation 题解

    考查代码能力的题目.也能够说是算法水题,呵呵. 推荐新手练习代码能力. 要添加难度就使用纯C实现一下stack,那么就有点难度了,能够使用数组模拟环形栈.做多了,我就直接使用STL了. #includ ...

  10. ckplayer

    ckplayer 的使用基本功能实现(一) 有个项目里用到视频播放功能,虽然是国产的插件,但我觉得做的还是不错,而且是免费使用,顺便支持下国内的一些项目(O(∩_∩)O~). 一.首先去官网下载 插件 ...