我正在构建用于个性化商品的Web应用程序。要求是为用户提供几个文本框以获取输入,将完全相同的格式推送到服务器并进行处理。我有textareas来接受输入,但一直在努力推送与我们在表格中看到的相同格式浏览器。

一旦文本超过文本区域中的行宽,它将继续移动到另一行。通过一个完整的字符串,用户将看到文本分散在多行中。我计划在这些位置插入新的换行符,以使文本可以跨多行打断,这样我就可以将相同格式的文本推送到服务器,但是这给我带来了麻烦。

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

如果我对一行中的字符数进行硬编码并通过javascript添加'\ n',我一定能够实现它,但是正如我上面提到的,这破坏了输出。我能够添加新的换行符,但只能在硬编码的限制下。由于字符具有不同的宽度,因此相同的约束无法正常工作。

范例1:
内部textarea:


  脾气暴躁的巫师为
  邪恶的女王和杰克。


“ brew for”行结束。当此文本区域内容的字符数限制为34时,得到的输出是:


  脾气暴躁的巫师为
  邪恶的女王和杰克。


在文本框中显示的完美副本,这是需要的。让我们看下一个实例:

范例2:
内部文字区域:


  脾气暴躁的向导使有毒的酒
  对于邪恶的女王和杰克。


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


  脾气暴躁的向导使有毒的饮料
  邪恶的女王和杰克。


因此,正如我们所看到的,尽管换行符发生在“ 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);
    });

});


添加小提琴(http://jsfiddle.net/beetleport/aR2YH/2/)来演示该场景。字体大小可以增加或减小,文本框中的外观会更改,但由于字符数限制,输出将相同。 StringDivider函数是堆栈溢出时另一篇文章的示例参考。

最佳答案

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

10-05 20:36
查看更多