//场景: 要做一个网页即时通信,发送信息的文本编辑框  要求能发图片和表情,那么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 光标位置 处理的更多相关文章

  1. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

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

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

  3. js获取可编辑区域光标位置

    请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tr ...

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

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

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

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

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

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

  7. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

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

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

  9. js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. shell-001:记录每天的磁盘情况

    # shell-100只是为了练习!!适合新手! #!/bin/bash # 此脚本是记录每天的磁盘情况,记录保存30天! # 当前的日期 current_time=$(date +%F) # 保存的 ...

  2. Android WebView的使用(用来显示网页)

    1.WebView介绍 2.URL介绍 简单说就是网址. 3.java后台代码 package com.lucky.test34webview; import android.support.v7.a ...

  3. 洛谷 P3244 / loj 2115 [HNOI2015] 落忆枫音 题解【拓扑排序】【组合】【逆元】

    组合计数的一道好题.什么非主流题目 题目背景 (背景冗长请到题目页面查看) 题目描述 不妨假设枫叶上有 \(n​\) 个穴位,穴位的编号为 \(1\sim n​\).有若干条有向的脉络连接着这些穴位. ...

  4. 【KMP】【字符串】KMP字符串匹配算法 学习笔记

    一.简介     KMP是由Knuth.Morris和Prat发明的字符串匹配算法,它的时间复杂度是均摊\(O(n+m)\).其实用Hash也可以做到线性,只不过Hash存在极其微小的难以避免的冲突. ...

  5. leetcode 283 Move Zeros; 27 Remove Elements; 26 Remove Duplicated from Sorted Array;

    ,,,,}; //把数组的值赋给vector vector<int> vec(arr, arr+sizeof(arr)/sizeof(int)); 解法一: 时间复杂度O(n) 空间复杂度 ...

  6. Mock单元测试

    /// <summary> /// 普通插入 /// </summary> [Fact] public void InsertOrder_Tests() { _sqlMappe ...

  7. [转] Clojure 快速入门指南:1/3

    [From] http://huangz.iteye.com/blog/1325228 导读 本文的目标是为熟悉 Ruby.Python或者其他类似语言.并对 Lisp 或者函数式编程有一定程度了解的 ...

  8. UVa 253

    UVa 253 #include <iostream> #include <cstdio> #include <string> #include <cstri ...

  9. Android so 库按需打包

    Fresco 大部分的代码是由Java写的,但是里面也有很多C++的代码.C++代码必须根据Android 设备的CPU类型(通常称为”ABIs”)进行编译.目前Fresco支持五种 ABI: arm ...

  10. PIE SDK地图鹰眼图

    鹰眼图,是GIS的一个基本功能,在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置,是对全局地图的一种概述表达,能够起到很好的空间提示和导航的作用.网上有很多Arcengine 二 ...