之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>UMEDITOR 简单功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../third-party/jquery.min.js"></script>
</head>
<body> <h1>UMEDITOR 简单功能</h1>
<script type="text/javascript">
$(function(){
$("#myEditor").focus(function(){
$("#myEditor").removeClass("flag");
});
/* $("#myEditor").blur(function(){
$("#myEditor").addClass("flag");
}); */
}); function add(){
insertHTML("<input type='text' disabled />");
} //再加入一个全屏事件
$(window).click(function(e)
{
if (window.getSelection)
{
var getevent=e.srcElement?e.srcElement:e.target;//不要告诉我不知道这句的意思
//console.log(getevent.id,getevent.tagName);
if(getevent.id!=null && getevent.id=="cmdInsert"||getevent.id=="myEditor")
{
//alert(0);
//代表 点了插入html的按钮
//则不执行getFocus方法
}
else
$("#myEditor").addClass("flag");//除非点了那个插入html的按钮 其他时候必须要执行getFocus来更新最后失去焦点的div
} }) function insertHTML(html)
{
var dthis=$("#myEditor")[0];//要插入内容的某个div,在标准浏览器中 无需这句话
//dthis.focus();
var sel, range;
console.log($(dthis).hasClass("flag"));
if($(dthis).hasClass("flag")){
$(dthis).html(dthis.innerHTML+html);
return;
}
if (window.getSelection)
{
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
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);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
else if (document.selection && document.selection.type !='Control')
{
$(dthis).focus(); //在非标准浏览器中 要先让你需要插入html的div 获得焦点
ierange= document.selection.createRange();//获取光标位置
ierange.pasteHTML(html); //在光标位置插入html 如果只是插入text 则就是fus.text="..."
$(dthis).focus(); }
}
</script>
<button onclick="add()" id="cmdInsert" style="border: none;background-color: #fff;">增加节点</button>
<div id="myEditor" class="flag" style="position:absolute;width:800px;height:240px;border:1px;border-color: red;background-color: #f5f5f5" contenteditable="true"> </div> </body>
</html>

2017-02-20 可编辑div中如何在光标位置添加内容的更多相关文章

  1. js之向div contenteditable光标位置添加字符

    js之向div contenteditable光标位置添加字符  原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...

  2. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  3. C#-WinForm-如何获取文本框(TextBox)中鼠标,光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

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

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

  5. (转)jquery easyui treegrid使用小结 (主要讲的是如何编辑easyui中的行信息包括添加 下拉列表等)

    在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列 ...

  6. sql语句(已在Oracle中测试,之后有添加内容放在评论中)

    1增 1.1[创建一张表] create table 表名(列名 类型); 例: ),性别 ),出生日期 date); ),sex ),出生日期 date); 1.2[插入单行]insert [int ...

  7. chrome、firefox、IE中input输入光标位置错位解决方案

    以前在项目里碰到过一个问题 input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟i ...

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

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

  9. 【转】怎么给javascript + div编辑框光标位置插入表情文字等?

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

随机推荐

  1. hctf2016 fheap学习(FreeBuf发表的官方解法)

    目录 如何在二次释放前修改函数指针 修改函数指针流程 如何获得进程的加载基址 puts函数的调用 如何获取system函数地址 说一下用DlyELF函数 如何调用system函数 ROP需要的栈布局 ...

  2. Oracle学习笔记—Db_name、Db_domain、Global_name、Service_name、Instance_name和Oracle_SID(转载)

    转载自: Oracle中DB_NAME,SID,DB_DOMAIN,SERVICE_NAME等之间的区别 Db_name:对一个数据库(Oracle database)的唯一标识.这种表示对于单个数据 ...

  3. 视频解码芯片SAA7111A的初始化

    为了完成SAA7111A的初始化,FPGA需要完成I2C控制器的设计. 之前本科的时候初步接触过I2C,但是编写一个Verilog的控制器还是觉得有点难度的.说实话,那时候都无从下手,对实现这样一个协 ...

  4. 3.3 使用STC89C52控制MC20通过GPRS远程发送数据

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  5. More on Class Loading and Initialization

    上一篇博客中对于类的加载和初始化进行了详细的说明,但上一篇博客代码中的main()所在的类为导出类, 对其中一些问题的理解可能会引起误导和不明确,所以补充这篇博客进一步说明.以下面的代码为例进行说明: ...

  6. Python 5 面对对象编程

    面向对象编程: 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程 ...

  7. ajax数据请求的理解

    一,请求 发送请求有两种方式:get 跟 post . 1.get仅请求数据,不需要服务端做处理,最后会返回指定的资源. 2.post可以提交数据,服务端根据提交的数据做处理,再返回数据. 二,创建X ...

  8. Raspberry Pi开发之旅-土壤湿度检测

    一.土壤传感器 传感器四个针脚:  针脚 含义 AO 模拟信号输出 DO 数字信号输出 GND 电源负极 VCC 电源正极 二.接线 YL-38和YL69 之间直接用2根母对母线连接. YL-38和树 ...

  9. 【TopCoder】SRM152 DIV2总结

    为什么平常刷的时候感觉还不错,比赛的时候只能做出来一道题=.= 250分题:大水题,根据题目规则把一个字符串翻译成数字,直接代码:GitHub 我是通过遍历一个个数出来的,看到大神的解法是把字符用‘- ...

  10. PHP实现链式操作

    什么是链式操作 我们经常会在一些应用框架中看到如下代码: $db = new Database; $db->where('cid = 9')->order('aid desc')-> ...