我正在构建用于个性化商品的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元素,向其运行时添加了文本,然后计算了可以容纳的实际宽度。