如果设置Div 编辑器的光标位置？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果设置Div 编辑器的光标位置？相关的知识，希望对你有一定的参考价值。
例如
定义 <div id="test" contenteditable="true"> </div>
当用户输入一段文本后ABCDEFG， 点击
<input type="button" onclick="" value="click me" /> 按钮
如何将光标定位到D 后面？？
没有能人给 解决一下吗？ 光标位置不见得必须定位到D， 是根据button click 事件动态传进去的参数。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
//实现获取焦点位置信息基本功能
function getOffsetPointer(_mOffset)
if (document.selection)
var OffsetObject = new Object();
var _allText = _mOffset.value; //输入框的所有值
_mOffset.focus(); //输入框获得焦点
var s = _mOffset.scrollTop; //获得滚动条的位置
var _rOffset = document.selection.createRange(); //创建文档选择对象根据当前文字选择返回 TextRange 对象
var _tOffset = _mOffset.createTextRange(); //创建输入框文本对象
_tOffset.collapse(true); //将光标移到头
_tOffset.select(); //显示光标
var _nOffset = document.selection.createRange(); //为新的光标位置创建文档选择对象
//在这里主要介绍下TextRange对象的setEndPoint方法和compareEndPoints方法
//先介绍setEndPoint("[way]",oRange)方法：将当前范围的开始或结束点移动到oRange范围的开
//始或者结束点
//该方法有两个参数:[way]表示将当前范围以何种方式移动到oRange范围，有四种方式：
//StartToStart将当前开始位置移动到oRange的开始位置，
//StartToEnd将当前范围开始位置移动到oRange的结束位置，EndToStart将当前结束位置移动到
//oRange的开始位置，EndToEnd将当前范围的结束位置
//移动到oRange的结束位置，oRange该对象也是TextRange，oRange的开始和结束位置代表要移动到
//的目标位置
_rOffset.setEndPoint("StartToStart", _nOffset); //在以前的文档选择对象和新的对象之间创建对象
var _leftText = _rOffset.text; //获得文档选择对象的文本(从鼠标焦点到文档开头的文本)
var leFTPos = _leftText.length; //文档开头到鼠标焦点的文本长度
var _rightText = _allText.substring(leFTPos); //获取鼠标焦点到文档结束的文本
alert(leFTPos);
OffsetObject.length = leFTPos;
OffsetObject.scrollTop = s;
OffsetObject.leftValue = _leftText;
OffsetObject.rightValue = _rightText;
return leFTPos;
else
alert(_mOffset.selectionStart);
return _mOffset.selectionStart;
function dingwei(index)
if (document.selection)
var a = document.getElementById("t2").createTextRange();
a.moveStart('character', 3); //将开始点向前移动三个位置(每个位置就是一个字符)
a.collapse(true);
a.select();
else
var a = document.getElementById("t2");
a.selectionStart = document.getElementById('txtIndex').value;
a.focus();
</script>
</head>
<body>
<table>
<tr>
<td>
定位的地方
</td>
<td>
<input id="txtIndex" />
</td>
</tr>
<tr>
<td colspan="2">
<textarea rows="6" id="t2" cols="60" >abcdefg</textarea>
</td>
</tr>
<tr>
<td colspan="2"> <button onclick="dingwei()" >
定位</button>
</td>
</tr>
</table>
</body>
</html>
拿去用吧 参考技术A 用JS写focus 参考技术B 一定要定位到D后面？不是的话可以试试focus函数
DIV 粘贴插入文本或者其他元素后，移动光标到最新处
此文主要是可编辑div光标位置处理
1：首先 设置一个可编辑的DIV，注意：设置 contenteditable="true" 才可以编辑DIV
<div id="talkContent" style="resize: none;height:150px;overflow:auto" contenteditable="true"></div>
2：移动光标js方法
//聊天内容框 插入文本或者其他元素后，移动置光标到最新处 function insertHtmlAtCaret(childElement) { var sel, range; if (window.getSelection) { // IE9 and non-IE sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.appendChild(childElement); var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); 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); } }
3：从光标现在的位置追加文本，成功后，光标在追加的文本后面
insertHtmlAtCaret(document.createTextNode(‘这里是要追加的文本’));
4：从光标现在的位置追加元素，成功后，光标在追加的元素后面
var new_img = document.createElement(‘img‘); new_img.setAttribute(‘src‘, ‘这是图片地址‘); new_img.style.maxWidth = "200px"; new_img.style.maxHeight = "120px"; insertHtmlAtCaret(new_img);
以上是关于如果设置Div 编辑器的光标位置？的主要内容，如果未能解决你的问题，请参考以下文章
各位帅哥，jQuery怎么获取可编辑div的光标的位置或者索引？ 急急急 。。。。