Question

我正在开发像http://podio.github.com/jquery-mentions-input/这样的扩展文本区域在那里你可以看到一个透明的Textarea，背景中有一个元素模拟突出显示。

你也可以在那里看到问题：输入一些长文本，例如“iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii”（最后注意空间）然后键入“@ke”并选择第一个联系人。您将看到背景与textarea中的文本不同。我发现这不是因为尺寸不同！

任何想法如何避免？

P.S。：我不想让你满意。为测试我使用chrome（测试点！）和firefox。我认为这种技术经常用于自动计算textarea-hight，它们必须有同样的问题吗？！

Answer 1

我自己找到了一个不同的解决方案：手动计算换行符。

我从这个帖子修改并改进了换行符加法器：finding "line-breaks" in textarea that is word-wrapping ARABIC text 最大的区别是：此函数仅检索中断的值而不应用中断，因为它使用了临时元素副本。

我认为它可以帮助别人！

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

唯一的事：它在长文本上很慢。欢迎提出优化建议。

Textarea与Inline的不同突破？

1 个答案: