在JavaScript插入位置之前拿到最后一个字符 [英] get last character before caret position in javascript

问题描述

我将要实施的Facebook就像集成在我的 CONTENTEDITABLE DIV 其中，如果我给$，并像一些字符'a'我需要一个自我暗示这应该弹出靠近我的插入符号位置。

我需要知道如何找出之前插入符的位置无论是在JavaScript进行IE和其他浏览器的最后一个字符。我有机会获得jQuery库。

 （函数（$）{
    $ .fn.getCursorPosition =功能（）{
        无功输入= this.get（0）;
        如果回报（输入！）; //否（输入）元素中
        如果（'selectionStart'输入）{
            //符合标准的浏览器
            返回input.selectionStart;
        }否则如果（document.selection）{
            // IE
            input.focus（）;
            变种SEL = document.selection.createRange（）;
            VAR selLen = document.selection.createRange（）text.length。
            sel.moveStart（'性格'，-input.value.length）;
            返回sel.text.length  -  selLen;
        }
    }
}）（jQuery的）;例如。
变种caretPosition = $（＃contenteditablediv）getCursorPosition（）;
变种lastchar =的getchar（caretposition -1）;
 

解决方案

下面是如何做到这一点的例子。它创建开始于可编辑元素的起点，并立即插入符之前结束的范围，得到范围的文本，并返回该范围内的最后一个字符。

演示： http://jsfiddle.net/MH5xX/

code：

 功能getCharacter precedingCaret（containerEl）{
    VAR precedingChar =，SEL，范围，precedingRange;
    如果（window.getSelection）{
        SEL = window.getSelection（）;
        如果（sel.rangeCount大于0）{
            范围= sel.getRangeAt（0）.cloneRange（）;
            range.collapse（真）;
            range.setStart（containerEl，0）;
            precedingChar = range.toString（）片（-1）。
        }
    }否则如果（（SEL = document.selection）及＆放大器; sel.type =控制！）{
        范围= sel.createRange（）;
        precedingRange = range.duplicate（）;
        precedingRange.moveToElementText（containerEl）;
        precedingRange.setEndPoint（EndToStart，范围）;
        precedingChar = precedingRange.text.slice（-1）;
    }
    返回precedingChar;
}
 

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.

I need to know how to find out the last character before caret position either in JavaScript for IE and Other browsers. I have access to the Jquery library.

(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/

Code:

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

这篇关于在JavaScript插入位置之前拿到最后一个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！