0

http://podio.github.com/jquery-mentions-input/のような拡張 Textarea に取り組んでい ます。ハイライトをシミュレートする背景に要素を持つ透明な Textarea が表示されます。

そこでも問題を見ることができます: "iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii" のような長いテキストを入力し (末尾のスペースに注意)、"@ke" と入力して最初の連絡先を選択します。背景がテキストエリア内のテキストとは異なるように分割されていることがわかります。これはサイズが違うからではないことがわかりました！

それを回避する方法はありますか？

PS: 私はあなたに満足してほしくありません。テストには、クロム（ポイントでテスト！）とFirefoxを使用しました。このテクニックは、テキストエリアの高さの自動計算にもよく使用されると思いますが、同じ問題があるに違いありませんか?!

4

1 に答える 1

0

私は自分で別の解決策を見つけました：改行を手動で数えます。

このスレッドの line-break-adder を修正して改善しました:テキストエリアで "改行" を見つけて、アラビア語のテキストを折り返します 大きな違い: この関数は一時的な要素を使用していたため、改行を適用せずに改行された値のみを取得しますコピー。

私はそれが他の誰かを助けることができると思います！

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

唯一のこと：長いテキストでは遅い。最適化のアイデアは大歓迎です。

于 2012-11-10T15:52:00.407 に答える