可编辑DIV 光标位置 处理
//场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image // 采用方案是使用可编辑的DIV(也就是 一般 DIV的 contenteditable 属性为 true) // 但是发现添加表情或者插入图片之后,光标不会随着移动到末尾 图片和表情 采用的 append方式 添加的html结构 采用以下方法可以在输入图片和表情之后 使光标出现在最后 IE11 和 chrome浏览器 完全没问题 obj 传入的是 需要append图片的 DOM对象 ,text 传入的是 图片html结构
function inimage(obj,text){
var range, node;
if(!obj.hasfocus) {
obj.focus();
}
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
range.collapse(false);
node = range.createContextualFragment(text);
var c = node.lastChild;
range.insertNode(node);
if(c){
range.setEndAfter(c);
range.setStartAfter(c)
}
var j = window.getSelection();
j.removeAllRanges();
j.addRange(range); } else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(text);
}
}
可编辑DIV 光标位置 处理的更多相关文章
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- 【转】怎么给javascript + div编辑框光标位置插入表情文字等?
最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;lt;img src="https://pic2.zh ...
- js获取可编辑区域光标位置
请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tr ...
- 可编辑DIV与移动端软键盘兼容性问题汇总
此文复现的所有兼容性问题均为以下情况: 1. 腾讯X5内核 2. 全屏webview 问题如下: 1. IOS12 中软键盘弹出导致页面顶部截断,并且无法恢复. 解决方法:添加交互事件,调用本地方法, ...
- 可编辑div中包含子元素时获取光标位置不准确的问题
前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...
- 2017-02-20 可编辑div中如何在光标位置添加内容
之前做了一个可编辑div需要在里面插入内容,搜了好多代码,就这个能实现我的功能,记录一下,以备以后用 <!DOCTYPE HTML> <html> <head> & ...
- 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...
- js之向div contenteditable光标位置添加字符
js之向div contenteditable光标位置添加字符 原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 第9项:尽量使用try-with-resources而不是try-finally(Prefer try-with-resources to try-finally)
Java库包含许多必须通过调用close方法手动关闭的资源. 示例包括InputStream,OutputStream和java.sql.Connection. 关闭资源经常被客户忽视,可预见的可 ...
- c++11中关于`std::thread`线程传参的思考
关于std::thread线程传参的思考 最重要要记住的一点是:参数要拷贝到线程独立内存中,不管是普通类型.还是引用类型. 对于传递参数是引用类型,需要注意: 1.当指向动态变量的指针(char *) ...
- 5. pytest的断言
一.pytest 支持Python自带的标准断言 def f(): return 3 def test_function(): assert f() == 4 pytest 的断言报告,也很丰富,和详 ...
- 一、pytest的介绍和安装
需要针对一个项目系统开发一套UI自动化测试脚本,自己结合着学习,采用了pytest去实现,这里留下记录. 什么是pytest pytest 是一个非常成熟的全功能的Python测试框架 可以胜任uni ...
- jenkins官方文档(中文版)
https://www.w3cschool.cn/jenkins/
- Flask之flask_script
flask端口占用 解决方案: lsof -i:5000 #查询是哪个进程占用的 kill PID 杀掉进程 flask_script之Manager类 from flask import Flask ...
- python 并发之多进程实现
一.multipricessing模块的介绍 python中的多线程无法利用多核优势,如果想要充分的使用多核CPU资源,在python中大部分情况下需要用多线程,python提供了multiproce ...
- codeforces 1072D Minimum path bfs+剪枝 好题
题目传送门 题目大意: 给出一幅n*n的字符,从1,1位置走到n,n,会得到一个字符串,你有k次机会改变某一个字符(变成a),求字典序最小的路径. 题解: (先吐槽一句,cf 标签是dfs题????) ...
- js 中的! 和 !! 的区别
Js中!的用法是比较灵活的,它除了做逻辑运算常常会用!做类型判断,可以用!与上对象来求得一个布尔值,1.!可将变量转换成boolean类型,null.undefined和空字符串取反都为false,其 ...
- Android四层架构
Andrid系统的体系结构设计为多层结构,这种结构在给用户提供安全保护的同时还保持了开放平台的灵活性.如下图所示: Google官方提供的Android系统的四层架构图 从上到下进行简单介绍: 一 ...