在javascript中获取插入符号位置之前的最后一个字符

Posted

技术标签:

【中文标题】在javascript中获取插入符号位置之前的最后一个字符【英文标题】:get last character before caret position in javascript 【发布时间】:2013-02-15 22:28:46 【问题描述】:

我即将在我的 contenteditable div 中集成 Facebook位置。

我需要知道如何在 IE 和其他浏览器的 javascript 中找出插入符号位置之前的最后一个字符。我可以访问 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);???

【问题讨论】:

该功能不适用于非 IE 浏览器中的 contenteditable 元素。它用于输入和文本区域。 是的,我知道这只是一个例子。你能建议我用其他方法找到插入符号位置之前的最后一个字符吗?? 【参考方案1】:

以下是如何执行此操作的示例。它创建一个范围,从可编辑元素的开头开始并在插入符号之前立即结束,获取范围的文本并返回该范围的最后一个字符。

演示: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>

【讨论】:

它的作品就像一个魅力。谢谢。我还有一个问题。我正在使用 Infragistics 内容编辑器。所以在 IE 中它将是一个 div,但在 Chrome 中它将是一个 iframe。我尝试使用 iframe,但它不起作用.. 你能告诉我如何在 iframe 中找到它。谢谢 @Anoop:您需要用从 iframe 获得的文档和窗口对象替换对 documentwindow 的引用。应该不会太难。 谢谢。它对我有用。对于带有 iframe 的 Chrome,我使用 document.getElementById('iframe_id').contentDocument.getSelection() 而不是 window.getSelection。我使用 range.setStart(containerEl.contentDocument.body, 0);在 range.setStart(containerEl, 0); 再次感谢。你能给我建议这个链接的任何解决方案吗how to show an auto suggestion div near the caret position in a content-editable div 希望其他人能发现这很有用,例如我在插入符号后立即找到字符。非常感谢@TimDown 的额外帮助jsfiddle.net/MH5xX/139 @scniro 似乎我找到了在插入符号后获取字符的解决方案:您只需要使用 range.setEndAfter(range.endContainer) 而不是 range.setStart(containerEl, 0) 然后获取此范围的第一个字符:range.toString()[0]跨度>

以上是关于在javascript中获取插入符号位置之前的最后一个字符的主要内容,如果未能解决你的问题,请参考以下文章

用Javascript移动光标位置?

获取文本区域中插入符号的偏移位置(以像素为单位)[重复]

如何使用 JavaScript 查找 INPUT 和 TEXTAREA 插入符号位置坐标?

JavaScript 插入符号位置

如何使用 html 子元素在 contenteditable div 中获取插入符号位置?

获取 TextArea 中插入符号的 XY 位置