[英]get last character before caret position in javascript
I am about to implement Facebook like in integration in my contenteditable div where if i give '$' and some character like 'a' i need a auto-suggestion which should pop up near my caret position.
我即将在我的contenteditable div中实现类似 Facebook 的集成,如果我给出 '$' 和一些像 'a' 这样的字符,我需要一个自动建议,它应该在我的插入符号位置附近弹出。
I need to know how to find out the last character before caret position either in JavaScript for IE and Other browsers.我需要知道如何在 IE 和其他浏览器的 JavaScript 中找出插入符号位置之前的最后一个字符。 I have access to the Jquery library.
我可以访问 Jquery 库。
(function($) {
$.fn.getCursorPosition = function() {
var input = this.get(0);
if (!input) return; // No (input) element found
if ('selectionStart' in input) {
// Standard-compliant browsers
return input.selectionStart;
} else if (document.selection) {
// IE
input.focus();
var sel = document.selection.createRange();
var selLen = document.selection.createRange().text.length;
sel.moveStart('character', -input.value.length);
return sel.text.length - selLen;
}
}
})(jQuery);
eg.
var caretPosition = $("#contenteditablediv").getCursorPosition();
var lastchar = getchar(caretposition -1);???
Here's an example of how to do this.下面是如何执行此操作的示例。 It creates a range that starts at the start of the editable element and ends immediately before the caret, gets the range's text and returns the last character of that range.
它创建一个从可编辑元素的开头开始并在插入符号之前结束的范围,获取范围的文本并返回该范围的最后一个字符。
Demo: http://jsfiddle.net/MH5xX/演示: http : //jsfiddle.net/MH5xX/
function getCharacterPrecedingCaret(containerEl) { var precedingChar = "", sel, range, precedingRange; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount > 0) { range = sel.getRangeAt(0).cloneRange(); range.collapse(true); range.setStart(containerEl, 0); precedingChar = range.toString().slice(-1); } } else if ( (sel = document.selection) && sel.type != "Control") { range = sel.createRange(); precedingRange = range.duplicate(); precedingRange.moveToElementText(containerEl); precedingRange.setEndPoint("EndToStart", range); precedingChar = precedingRange.text.slice(-1); } return precedingChar; } var editableEl = document.getElementById("editable"); var precedingCharEl = document.getElementById("precedingChar"); function reportCharacterPrecedingCaret() { precedingCharEl.innerHTML = "Character preceding caret: " + getCharacterPrecedingCaret(editableEl); } editableEl.onmouseup = editableEl.onkeyup = reportCharacterPrecedingCaret;
<div contenteditable="true" id="editable">Here is some text. Please put the caret somewhere in here.</div> <div id="precedingChar" style="font-weight: bold"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.