javascript - 无法在文本换行并移动到下一行的文本区域内换行

Question

我正在为个性化商品构建网络应用程序。要求是向用户提供几个文本框以获取输入，将完全相同的格式推送到服务器并对其进行处理。我有文本区域来获取输入，但一直在努力推送与我们在浏览器。

一旦文本超过文本区域中的行宽，它就会移到另一行。用户会看到文本虽然是一个完整的字符串，但分布在多行中。我计划在这些点插入新的换行符，这样文本就可以被分成多行，这样我就可以将相同格式的文本推送到服务器，但这让我很难过。

提供给用户的选项是字体及其不同的大小。即使对于相同的字体大小，文本区域中的一行也可以根据键入字符的宽度容纳不同数量的字符。这使得内容无法根据任何预先确定的最大字符长度换行。

如果我对一行中的字符数进行硬编码并通过 javascript 添加“\n”，我在某种程度上能够实现它，但正如我上面提到的那样，这会破坏输出。我可以添加新的换行符，但只能在硬编码限制下添加。由于字符具有不同的宽度，相同的约束无法正常工作。

示例 1:内部文本区域:

Grumpy wizards make toxic brew for
the evil Queen and Jack.

在“brew for”之后换行。当针对 34 个字符限制处理此文本区域内容时，我得到的输出是:

Grumpy wizards make toxic brew for
the evil Queen and Jack.

文本框中的完美复制品，这就是所需要的。让我们看下一个例子:

示例 2:内部文本区域:

GRUMPY WIZARDS MAKE TOXIC BREW
FOR THE EVIL QUEEN AND JACK.

“BREW”后立即换行。处理此文本区域内容时，输出为:

GRUMPY WIZARDS MAKE TOXIC BREW FOR
THE EVIL QUEEN AND JACK.

正如我们所见，虽然在“TOXIC BREW”之后文本框内出现了换行符，但由于硬编码的字符限制，我可以实现的是在“TOXIC BREW FOR”之后换行。和我想要的不一样。

因此，依靠预先确定的长度然后通过 javascript 将“\n”添加到相应的中断点并不能帮助我解决问题。有没有一种方法可以检测文本的确切换行位置，以便我可以在这些点上精确地添加新的换行符？不确定，是否有更好的方法来实现相同的目标？

我们将不胜感激任何帮助/指点。

---

编辑:

CSS:

textarea#lpt {
height: 150px;
width: 50%;
border: 1px solid rgb(204, 204, 204);
/*font-size:20px;*/
}

JS:(引用 Wrap Text In JavaScript)

function stringDivider(str, width, spaceReplacer) {
    if (str.length>width) {
        var p=width
        for (;p>0 && str[p]!=' ';p--) {
        }
        if (p>0) {
            var left = str.substring(0, p);
            var right = str.substring(p+1);
            return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
        }
    }
    return str;
}
$(document).ready(function(){
    $('#submit_text').click(function(){
        text = $('#lpt').val();
        alert("Original text submitted is: "+ "\n"+text);
        textWithBreaks = stringDivider(text, 34, "\n");
        alert("Processed Text is : "+"\n"+textWithBreaks);
    });

});

添加 fiddle ( http://jsfiddle.net/beetleport/aR2YH/2/ ) 来演示场景。字体大小可以增大或减小，文本框中的外观会发生变化，但由于字符限制，输出将相同。 StringDivider 函数是来自另一篇有关堆栈溢出的文章的示例引用。

Answer 1

我使用了错误的方法。最好的方法是使用文本宽度并将其与文本区域中的左侧宽度进行比较。本帖Calculating text width帮我定义了一个假的 span 元素，在运行时向它添加文本，然后计算可以容纳的实际宽度。