我找到了很多关于如何在contentEditable DIV中设置光标或插入位置的好的,交叉浏览器的答案,但是没有关于如何获取或找到它的位置......
我想要做的是在关键字中知道该div中插入符号的位置.
因此,当用户输入文本时,我可以随时知道其光标在div中的位置.
编辑:我在div内容(文本)中寻找INDEX,而不是光标坐标.
<div id="contentBox" contentEditable="true"></div>
$('#contentbox').keyup(function() {
// ... ?
});
我想要一个Javascript Regex来包装给定的start(<span>)和结束标记(即</span>)中给定的单词列表,但前提是该单词实际上是页面上的"可见文本",而不是在html属性中(例如链接的标题标记或<script></script>块内部.
我已经创建了一个基本设置的JS小提琴:http: //jsfiddle.net/4YCR6/1/
我需要在contenteditable div中实现数字的突出显示(将来我添加更复杂的规则).问题是当我使用javascript替换插入新内容时,DOM更改和contenteditable div失去焦点.我需要的是保持对当前位置的重点关注div,因此用户只需键入没有任何问题,我的功能简单突出显示数字.谷歌搜索我认为Rangy库是最好的解决方案.我有以下代码:
function formatText() {
var savedSel = rangy.saveSelection();
el = document.getElementById('pad');
el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>");
rangy.restoreSelection(savedSel);
}
<div contenteditable="true" id="pad" onkeyup="formatText();"></div>
问题是在函数结束工作焦点回到div之后,但是插入总是指向div开始,我可以在任何地方输入,除了div开始.还有console.log类型以下Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection.
请帮我实现这个功能.我打开另一个解决方案,不仅是rangy库.谢谢!
http://jsfiddle.net/2rTA5/这是jsfiddle,但是它不能正常工作(当我在我的div中输入数字时没有任何反应),不管我(第一次通过jsfiddle发布代码)或者资源不支持contenteditable.UPD*我在stackoverflow上读到类似的问题,但解决方案不适合我的情况:(
我正在取得进展但不太确定如何使这项工作正常......
我有一个contenteditable div,其功能类似于textarea.
我还有一个正则表达式来识别输入的URL并自动链接它们.我遇到了麻烦,但是当用户输入时,这项工作是"实时"的.
这是迄今为止我所拥有的jsFiddle.我遇到的另一个问题是在输入链接后光标跳转到div的开头(因为我正在替换div .html()？)
是否有创造性的解决方案用于.replace()div中的单个文本字符串而无需替换div的整个内容？