可编辑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);
}
}
时间: 08-04

可编辑DIV 光标位置 处理的相关文章

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

请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE

Android EditText插入表情(字符串)到光标位置

前言 之前写的一个Android应用,在回复帖子插入表情的时候存在一个BUG,就是无法在EditText中指定的光标处插入表情字符串,每次添加的表情字符串都跑到了文字末尾.分析了一下apk源码,发现是在表情盘的onClick响应事件中没有正确处理表情字符串的添加方法,这里记录一下如何在EditText指定光标处插入表情字符串. EditText光标处插入表情字符串的方法 既然是在EditText控件中插入表情字符串,那首先需要获取EditText控件对象,示例源码如下: EditText rEd

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

文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变一次,不需要鼠标的任何操作的. 下面代码能同时获取鼠标和光标位置,这里的"位置"指的是在字符串中的第几个. 需要在窗体上加上一个文本框(textBox1),还要绑定textBox1_KeyUp和textBox1_MouseDown事件. 要想实现鼠标点击或按键后光标位置获取,可用时使用下列

javascript获取以及设置光标位置

一. 获取光标位置: // 获取光标位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selection) { // IE Support textDom.focus (); var selectRange = document.selection.createRange(); selectRange.moveStart ('character', -textDom.value.length);

JQuery在光标位置插入内容

1 (function($) { 2 $.fn.extend({ 3 insertAtCaret: function(myValue) { 4 var $t = $(this)[0]; 5 //IE 6 if (document.selection) { 7 this.focus(); 8 sel = document.selection.createRange(); 9 sel.text = myValue; 10 this.focus(); 11 } else 12 //!IE 13 if

利用cookie记录div之前位置

cookie除了能用来存储用户名,密码等数据外还可以用来记录div之前的位置. 先上个布局 <div id="div1" style></div> #div1{ width: 100px; height: 100px; background: red; position: absolute; } 这里先说下拖拽的大体原理,将物体拖到新的位置可以通过改变left和top实现. 在将div从位置1移动到div2的过程中,不变的是鼠标在div中的位置.因此我们让鼠标在

android EditText获取光标位置并安插字符删除字符

android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index = editText.getSelectionStart();Editable editable = editText.getText();editable.insert(index, "aaaa");3.删除光标前字符int index = editText.getSelectionS

EditText光标位置

1.xml中设置 gravity="top"  加入edittext框的高度不止一行时,该属性可是光标定位在第一行,不设置的话光标是默认在框的中间 2.etEdit.setSelection(text.length());//光标位置在文字末尾

uwp - RichEditBox - 滚动至光标位置,解决行数超出后设置颜色滚动条回滚顶部的问题

开发中碰到一个问题,当RichEditBox输入的文本达到一定行数的时候设置文本颜色或大小.样式等滚动条会跳到顶部,但是光标其实还是在下面的位置,这样对用户体验造成很大困扰,解决方案就是在设置完成颜色大小样式后重新将光标位置设置一下就可以了. 在设置文本颜色之后加上这句代码: 1 //重新定位到位置 2 try 3 { 4 控件名字.Document.Selection.EndKey(TextRangeUnit.Line, false); 5 } 6 catch 7 { 8 9 } 应该解决了.

Android EditText中字符大小与光标位置

最近的工作需要自己写一个数字键盘用于数字的输入,采用的方法是自定义一个  Dialog,然后将数字显示在EditText中.在处理过程中遇到遇到一个问题,在EditText的点击事件中屏蔽系统键盘并弹出自定义的Dialog,无法获取用户选中的字符即Selection,造成的问题现象是用户不能选中中间某个位置修改输入值. 为了解决这一问题,需要在EditText的点击事件中获取Selection. 解决方法是:1.在EditText点击事件中获取用户点击位置,主要取其中的touchX值(这里主要讨