Different Breaking in Textarea vs. Inline?

Question

I am working on an extended Textarea like http://podio.github.com/jquery-mentions-input/ There you can see a transparent Textarea with an element in background simulating the highlighting.

You can see the problem there also: type some long text like "iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii " (attention to space at the end) and then type "@ke" and choose first contact. You will see that the background breaks different than the text in the textarea. I figured out that this is not because different sizes!

Any ideas how to avoid that?

P.S.: I dont want to you contentediable. For testing i used chrome (test with points!) and firefox. I think this technic is also used often for auto-calculating a textarea-hight and they must have the same problems?!

score 0 · Answer 1 · edited May 23 '17 at 12:12

I found a different solution myself: count line-breaks manually.

I modified and improved the line-break-adder from this thread: finding "line-breaks" in textarea that is word-wrapping ARABIC text The big difference: this function only retrieves the breaked value without applying the breaks cause it used a temporary element copy.

I think it could help someone else!

function getApplyLineBreaks(strTextAreaId) 
{
    var strRawValue = $('#' + strTextAreaId).val();
    var measureClone = $('#' + strTextAreaId).clone();
    measureClone.attr('id', 'value_break_mess_clone');
    measureClone.val('');
    measureClone.css('overflow', 'hidden');
    measureClone.removeAttr('onchange').removeAttr('onclick').removeAttr('onkeydown').removeAttr('onkeyup').removeAttr('onblur').removeAttr('onfocus');
    measureClone.height(10);
    measureClone.insertAfter('#' + strTextAreaId);

    var lastScrollWidth = measureClone[0].scrollWidth;
    var lastScrollHeight = measureClone[0].scrollHeight;
    var lastWrappingIndex = -1;
    var tolerancePixels = 5; //sollte kleiner als font-size
    var addedSpace = false;
    var debug_c = 0;

    for (var i = 0; i < strRawValue.length; i++) 
    {
        var curChar = strRawValue.charAt(i);
        if (curChar == ' ' || curChar == '-' || curChar == '+')
            lastWrappingIndex = i;
        measureClone.val(measureClone.val() + curChar);
        addedSpace = false;
        if (i != strRawValue.length - 1 && strRawValue.charAt(i + 1) != "\n")
        {
            measureClone.val(measureClone.val() + ' '); //this is only 90% zero-width breaker unnoticed
            addedSpace = true;
        }

        if (((measureClone[0].scrollWidth - tolerancePixels) > lastScrollWidth) || ((measureClone[0].scrollHeight - tolerancePixels) > lastScrollHeight))
        {
            if (addedSpace)
                measureClone.val(measureClone.val().substr(0, measureClone.val().length - 1));
            var buffer = "";
            if (lastWrappingIndex >= 0) 
            {
                for (var j = lastWrappingIndex + 1; j < i; j++)
                    buffer += strRawValue.charAt(j);
                lastWrappingIndex = -1;
            }
            buffer += curChar;
            measureClone.val(measureClone.val().substr(0, measureClone.val().length - buffer.length));

            if (curChar == "\n")
            {
                if (i == strRawValue.length - 1)
                    measureClone.val(measureClone.val() + buffer + "\n");
                else
                    measureClone.val(measureClone.val() + buffer);
            }
            else
            {
                measureClone.val(measureClone.val() + "\n" + buffer);
            }
            lastScrollHeight = measureClone[0].scrollHeight;
        }
        else if (addedSpace)
        {
            measureClone.val(measureClone.val().substr(0, measureClone.val().length - 1));
        }
    }

    var returnText = measureClone.val();
    measureClone.remove();
    return returnText;
}

Only thing: its slow on long texts. Ideas for optimization are welcome.

Different Breaking in Textarea vs. Inline?

1 Answers1