获取可编辑div光标位置

原文:http://www.jb51.net/article/57650.htm

<html>

<body>
	<button type="button" onclick="document.getElementById(‘test‘).focus(); insertHtmlAtCaret(‘<b>INSERTED</b>‘);">插入字符</button>
	<div contentEditable="true" style="height:50px; border:2px solid red;" id="test"> </div>
</body>

<script>

function insertHtmlAtCaret(html) {

var sel, range;

if (window.getSelection) {

// IE9 and non-IE

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

// Range.createContextualFragment() would be useful here but is

// non-standard and not supported in all browsers (IE9, for one)

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);

// Preserve the selection

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

// IE < 9

document.selection.createRange().pasteHTML(html);

}

}

</script>

<html>

  

时间: 2024-08-29 06:56:34

获取可编辑div光标位置的相关文章

可编辑div光标位置

参考: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange MDN上提示这些API不稳定.应该是兼容IE9+,谷歌,火狐 1. var s

可编辑DIV 光标位置 处理

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

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

获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置

获取textarea文本框所选字符光标位置索引,以及选中的文本值 $.fn.selection = function () { var s, e, range, stored_range; if (this[0].selectionStart == undefined) { var selection = document.selection; if (this[0].tagName.toLowerCase() != "textarea") { var val = this.val()

可编辑div 获取光标位置及插入内容

<!DOCTYPE html> <html> <title>Div 光标位置 插入 文字 或 HTML</title> <script language="javascript" type="text/javascript"> var range; function getPos() { range = window.getSelection().getRangeAt(0);//找到焦点位置 var spa

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

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

关于文本输入框获取光标位置以及指定位置插入内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> &l

在混合开发中软键盘引起的布局问题、input与可编辑DIV兼容性问题汇总

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

获取光标位置

原文:https://blog.csdn.net/mafan121/article/details/78519348 html <iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe> <input type="txt" onclick="alert(get