Отформатируйте элемент contentEditable по мере ввода

Question

Я в основном хочу сделать что-то очень простое: я хочу, чтобы пользователь печатал твит, а после 140 символов я хотел, чтобы текст, который будет обрезан, был серым. Должно ли быть простым, верно?

Я использую свойство contentEditable для форматирования.На событии keyup я проверяю, является ли текст слишком длинным, и перемещаю дополнительные символы в <span>, если это так.Тем не менее, выбор теряется на пути.

Я уже много чего пробовал (в том числе это ), но ничего не помогло - вы можете мне помочь?Я думаю, это помогло бы мне больше всего, если бы вы могли привести рабочий пример.

Answer 1

Я взял это на себя, потому что мне было интересно. Это очень большой объем кода, но это так. Моя новая версия не использует saveSelection () Rangy, но использует кросс-браузерную поддержку Range для совместимости с IE. Здесь слишком много кода, поэтому я просто сделаю ссылку на jsfiddle: http://jsfiddle.net/timdown/g7KJ5/9/

Answer 2

Я попробовал новый подход сейчас, и вот что я придумал:

$.fn.softlimit = function(maxChars, wrapElement, wrapAttributes) {
    var lastHTML, that = this[0];

    setInterval(function() {
        //Only trigger on change
        if (lastHTML == that.innerHTML) return;
        lastHTML = that.innerHTML;

        // Save the selection
        var savedSel = rangy.saveSelection();

        // Strip HTML and extract rangy markers
        var markers = [ ], text = '', htmlPos = 0;

        function escapeForHTML(text) {
            return text.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;').replace('"', '&quot;');
        }

        function processNode(node) {
            if (node.nodeType == 3) 
                text += escapeForHTML(node.nodeValue);
            else if (node.nodeName == 'SPAN' && node.id && node.id.indexOf('selectionBoundary_') === 0)
                markers.push({ index: text.length, html: node.outerHTML });
            else
                for (var i = 0; i < node.childNodes.length; ++i)
                    processNode(node.childNodes[i]);
        }

        processNode(that);

        // Do formatting
        var getOffset, markerOffset = 0;

        if (text.length > maxChars) {
            var startTag = '<' + wrapElement + ' ' + wrapAttributes + '>';
            var endTag = '</' + wrapElement + '>';

            text = text.substr(0, maxChars) + startTag + text.substr(maxChars) + endTag;

            getOffset = function(index) {
                if (index > maxChars) return startTag.length;
                else return 0;
            };
        }
        else
            getOffset = function() { return 0; };

        // Re-inject markers
        for (var i = 0; i < markers.length; ++i) {
            var marker = markers[i];
            var index = marker.index + getOffset(marker.index) + markerOffset;

            text = text.substr(0, index) + marker.html + text.substr(index);
            markerOffset += marker.html.length;
        }

        that.innerHTML = text;

        // Restore the original selection 
        rangy.restoreSelection(savedSel);
    }, 20);

    return $(this);
};

Спасибо @Tim Down за подсказку с маркерами, это была ключевая подсказка!

Answer 3

Я уже писал по электронной почте Джои, но взгляните на это:

https://gist.github.com/746962