可编辑div的createRange()

【可编辑div的createRange()】的更多相关文章

可编辑div的createRange()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 // 在元素的指定位置设置输入光标（注：目前只支持开始位置和结束位置） function __setCaret(element, pos) { try { element.focus(); } catch(e) { } var len = _…

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

前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPointPorsiton1() { if (window.getSelection) { var range = window.getSelection().getRangeAt(0);//创建range } else if (document.selection) { var range = doc…

2017-02-20 可编辑div中如何在光标位置添加内容

之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>UMEDITOR 简单功能</title> <meta http-equiv=&…

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

此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法,在键盘收起后执行页面回滚操作. bridgeClass.jsEventHook.keyboardWillShow = function () { // 添加flag 是因为有多个空时,切换输入框也会调用WillHide switchFlag = true; }; bridgeClass.jsEve…

js 指定位置插入html标签（可编辑div）

demo效果如下: html代码部分如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>…

可编辑DIV （contenteditable="true"）在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/…

限制可编辑div只能输入纯文本

本博客转载自张鑫旭大神的一篇文章:小tip: 如何让contenteditable元素只能输入纯文本,原文地址:http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/ 一.温故而知新很多年以前,稍等,让我搜一下contenteditable(右上角),哈,是2010年的时候,写了篇文章“div模拟textarea文本域轻松实现高度自适应”,就是说的contenteditable的应用. 虽然说,利用…

可编辑DIV 光标位置处理

//场景: 要做一个网页即时通信,发送信息的文本编辑框要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就是一般 DIV的 contenteditable 属性为 true) // 但是发现添加表情或者插入图片之后,光标不会随着移动到末尾图片和表情采用的 append方式添加的html结构采用以下方法可以在输入图片和表情之后使光标出现在最后 IE11 和 chrome浏览器完全没问题 ob…

鼠标光标聚焦到可编辑div的最末尾

<p> <div id='text' contenteditable=true style='width:100px;height:100px;border:1px #ccc;'>abc</div></p><script> function test1(){ var div = document.getElementById("text"); var range = document.createRange(); var le…

在可编辑div的光标下插入html

function pasteHtmlAtCaret(html, selectPastedContent) {//参数1为要插入的html //参数2为boolean 是否选中插入的html 默认为false var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.g…

jquery 实现可编辑div

html大致例如以下: <ol id="ol_group" class="list-group list_of_items"> <li class="list-group-item completed_item"> <div class="text_holder"> how are you? <div class="btn-group pull-right">…

jQuery 编辑div内容

div显示如下 <div id="showResult"></div> div中添加的html,进行拼接 $("#showResult").append(html);//在div中添加html,其中html为拼接好的html字符串 div中显示拼接的html $("#showResult").html(html);//在div中显示html,其中html为拼接好的html字符串清空div中的内容 $("#sho…

可编辑div,将光标定位到文本之后

类似qq回复一样,某人评论之后,在对评论进行回复之后,将光标定位到文本之后: function set_focus() { el=document.getElementById('guestbook_editor'); //el=el[0]; //jquery 对象转dom对象 el.focus(); if($.support.msie) { var range = document.selection.createRange(); this.last = range; range.moveTo…

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

过滤剪贴板内容以及定位可编辑div光标的方法: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.min.js"></scrip…

设置DIV可编辑

<div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态…

如何让DIV可编辑、可拖动

1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: <div id="move" co…

div可编辑可拖动

版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: <…

div的edit和drag（点击div可编辑、删除、拖动）

1.可编辑: <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可以让div编程可编辑状态 2.可拖动: $('#move').draggable(); 使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况. 3.可编辑.可拖动: <div id="move" co…

区域可编辑contenteditable的问题总结

一.如何在可编辑区域div的光标处通过点击事件来添加文本内容下面的例子是可编辑div的区域添加文本内容和判断光标位置的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 焦点位置:<input id=&quo…

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

此文主要是可编辑div光标位置处理 1:首先设置一个可编辑的DIV,注意:设置 contenteditable="true" 才可以编辑DIV <div id="talkContent" style="resize: none;height:150px;overflow:auto" contenteditable="true"></div> 2:移动光标js方法 //聊天内容框插入文本或者其他元素后…

启用div作为编辑器添加contentEditalbe属性

1.自从HTML5中新引入了contentEditalbe属性以后,div就与textarea一样,可以作为最常用的编辑器使用. 1.启用div作为编辑器让div进入编辑状态很简单,只需要: 复制代码代码如下: div.contentEditable=true; 这样就可以进入编辑状态.当然你直接在html中设置contenteditable也是可以的. 总的来说,实现可视化编辑,可以使用contentEditable和designMode两种方法.contentEditable刚开始在IE…

[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息 [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法 [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义 [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin…

H5富文本编辑器之初始化用于编辑的DOM-遁地龙卷风

使用H5的全局属性contenteditable可以让DOM元素及其子元素变的可编辑 <div contenteditable id="editor"> </div> 样式代码 html, body { overflow: hidden; width: 100%; height: 100%; } * { margin: 0; padding: 0; } #editor { width: 100%; height: 100%; outline: none; pad…

使用springmvc，jsp，结合网页文本编辑器kindEditor实现基本博客编辑功能

kindEditor官网:http://kindeditor.net/demo.php 个人实践: 为了在自己的项目中引入一个类似用户写博客的功能,在网上找到了kindeditor,真心又好又易用. 一.准备工作 1.下载kindeditor,在官网上点击右上方的下载链接,我下载的是4.1.11版.由于我的项目前端采用jsp,所以将解压以后的asp,asp.net和php文件夹删掉. 在jsp文件夹里的就是在jsp下使用kindeditor的demo.需要注意的是,demo.jsp文件中有笔误,…

百度编辑器UEditor源码模式下过滤div/style等html标签

UEditor在html代码模式下,当输入带有<div style="">.<iframe>这类带有html标签的内容时,切换为编辑器模式后,会发现输入的内容被删除,自动过滤掉了.提供两种解决方案: 1.“白名单法“,此即网上找的很多配置黑白名单,不过都适用于老版本:新版本的文件名做了很大改变,找不到那些方法中描述的原样文件.但是,一套程序的原理总是不变的,通过几天的研究.试了多种方法,发现,最新的版本(1.4.3)也有个所谓“白名单”,通过配置即可实现对默认的…

div模拟textarea文本域轻松实现高度自适应——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于textarea文本域以及高度自适应 textarea标签为表单元素,一般用在多行文字的输入.在web应用上常见的是评论输入框,微博信息输入框等.例如企鹅微博的输入框: 作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随…

换行符在textarea、div、pre中的区别

关于换行符,网上有许多说法,IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号.经过本人正则匹配测试,chrome.firefox.safari.IE11都是\n, 因此保险起见,若对换行符进行正则匹配,应当同时匹配\n, \r以及\r\n. 值得一提的是\n.\r和\r\n都有换一行的效果,有些同学写换行时常写作\n\r,这就相当于换了两行,因此必须注意! 换行符用于textarea textarea内的换行便是以换行符的形式实现,换行符也能用于textarea 换行符用于一…