Javascript 多行文本框中35个字符后的换行

我需要在多行文本框中实现单词包装。我不能允许用户一行写超过35个字符。我使用下面的代码，它精确地在每行指定的字符处断开，将单词一分为二。我们能解决这个问题吗？如果当前行中没有足够的空间容纳一个单词，我们可以将整个单词移到下一行吗

<asp:TextBox CssClass="txt" ID="TextBox1" runat="server"
             onkeyup="CountChars(this);" Rows="20" Columns="35" 
             TextMode="MultiLine" Wrap="true">
</asp:TextBox>

函数CountChars（ID）{
var IntermediateText=''；
var FinalText=“”；
var SubText=''；
var text=document.getElementById（ID.ID）.value；
变量行=text.split（“\n”）；
对于（变量i=0；i

编辑-1

---

我必须在一行中显示最多35个字符，没有特定的分词，并且需要保持右边两个字符的边距。同样，限制应为35个字符，但总共需要37个字符的空间（仅用于可见性问题）。

我在asp.net web应用程序中使用以下Jquery插件。将此代码放在“开始脚本”标记下：

function CountChars(ID) {
    var IntermediateText = '';
    var FinalText = '';
    var SubText = '';
    var text = document.getElementById(ID.id).value;
    var lines = text.split("\n");
    for (var i = 0; i < lines.length; i++) {
        IntermediateText = lines[i];
        if (IntermediateText.length <= 50) {
            if (lines.length - 1 == i)
                FinalText += IntermediateText;
            else
                FinalText += IntermediateText + "\n";
        }
        else {
            while (IntermediateText.length > 50) {
                SubText = IntermediateText.substring(0, 50);
                FinalText += SubText + "\n";
                IntermediateText = IntermediateText.replace(SubText, '');
            }
            if (IntermediateText != '') {
                if (lines.length - 1 == i)
                    FinalText += IntermediateText;
                else
                    FinalText += IntermediateText + "\n";
            }
        }
    }
    document.getElementById(ID.id).value = FinalText;
    $('#' + ID.id).scrollTop($('#' + ID.id)[0].scrollHeight);
}

然后在document ready中添加：

jQuery.fn.limitMaxlength = function(options){

var settings = jQuery.extend({
attribute: "maxlength",
onLimit: function(){},
onEdit: function(){}
}, options);

// Event handler to limit the textarea
var onEdit = function(){
var textarea = jQuery(this);
var maxlength = parseInt(textarea.attr(settings.attribute));

if(textarea.val().length > maxlength){
  textarea.val(textarea.val().substr(0, maxlength));

  // Call the onlimit handler within the scope of the textarea
  jQuery.proxy(settings.onLimit, this)();
}

// Call the onEdit handler within the scope of the textarea
jQuery.proxy(settings.onEdit, this)(maxlength - textarea.val().length);
}
this.each(onEdit);
return this.keyup(onEdit)
    .keydown(onEdit)
    .focus(onEdit);
}

然后在每个文本区域上，只需确保maxlength='35'像这样，并添加一个反馈占位符

$(document).ready(function () {

//give the user feedback while typing
var onEditCallback = function(remaining){
$(this).siblings('.charsRemaining').text("Characters remaining: " + remaining);

if(remaining > 0){
    $(this).css('background-color', 'white');
    }
}

var onLimitCallback = function(){
    $(this).css('background-color', 'red');
}

$('textarea[maxlength]').limitMaxlength({
    onEdit: onEditCallback,
    onLimit: onLimitCallback
});

});//end doc ready

希望这有帮助！

---

这是一个测试练习。这将在35个字符处断行。确保设置

cols=“35”

我希望这有帮助

更新：6/26/2012

删除了我的JSFIDLE链接。除非你开始回答我和其他人提出的问题，否则我不会解决这个问题。

---

这段代码应该像您需要的那样将文本包装为35个字符。这是一种限制输入的奇怪方式，但它应该可以工作。（以前的版本中有漏洞。我认为这一版本最终在很大程度上起作用了）

让JakeJ的评论更进一步

---

如果一行超过35个字符会破坏某些东西，那么进行javascript验证不是一个好主意。您可能会遇到一些问题，其中有人禁用了javascript，或者知道如果他们是恶意的，如何打破检查。是否有可能在服务器端执行此操作？也许可以提供一些关于您为什么需要这个的信息，我们可以帮助您找到一个可能的替代解决方案

• 如果每行不超过35个字符对业务逻辑很重要，那么您肯定必须在服务器上执行此操作！您只能使用JavaScript来改进用户界面。但是JavaScript不会保护您的服务器端逻辑免受“错误”输入的影响

• 对于演示文稿，您可以使用从所有其他人那里得到的建议，并将输入字段的大小限制为35列。这不会更改发送到服务器的输入值，但无论如何您都必须在服务器上执行此操作。正如您正确注意到的，在较新的浏览器中，用户可以重新调整文本区域的大小。这完全是网络化的：用户可以根据自己的口味调整演示文稿如果并且仅当-您确实需要限制它，因为背后有业务逻辑，您可以

• 如果它对业务逻辑不重要，但只是一个表示问题，那么您肯定希望改用普通样式：使用35列大小的文本区域，并让用户自行调整大小

备注:

• 请注意，如果使用JavaScript通过添加换行符来换行，您将能够处理用户更改已换行的行的用例。你是重新合并和包装它们，还是它们会变得越来越难看？采用我刚才提到的方法，您将不必处理这些问题。试试这个。写一些文字直到它结束。然后返回到第一行并删除一些字符（使用backspace，delete键在我使用FireFox时不起作用）。你会明白我的意思。用户必须能够移除原始包装，并让应用程序在不同的位置重新包装该行

• 默认情况下，文本区域有一个固定宽度的字体，因此无论是“m”还是“l”，每行都将限制为35个字符。但是您可能希望安全起见，另外在CSS中将字体设置为固定字体

• 对于“2空白”的要求——老实说，我觉得这听起来很傻。利用浏览器为您提供的功能。它适用于所有其他网站和web应用程序。使用CSS设置样式（例如，考虑添加填充），但请不要开始添加JavaScript攻击。如果您的客户提出了要求，我相信您可以与他们交谈，并解释为什么它不能按照他们想要的方式很好地工作

函数CountChars（ID）{
var IntermediateText=''；
var FinalText=“”；
var SubText=''；
var分裂；
var串联；
var text=document.getElementById（ID.ID）.value；
变量行=text.split（“\n”）；
对于（变量i=0；iif（IntermediateText.length这里有一个简单的函数，它在35个字符（或之前）处换行。目前唯一失败的情况是，如果您有超过35个字符且没有空格。如果您想在这种情况下进行硬换行，请让我知道，我会将其添加进来

<textarea id="TextBox1" class="txt" runat="server" placeholder="Some Text"  maxlength="35" cols="35" rows="2" ></textarea>

<script type="text/javascript">
    function CountChars(ID) {
        var IntermediateText = '';
        var FinalText = '';
        var SubText = '';
        var Splitted;
        var Concatenated;
        var text = document.getElementById(ID.id).value;
        var lines = text.split("\n");
        for (var i = 0; i < lines.length; i++) {
            IntermediateText = lines[i];
            if (IntermediateText.length <= 50) {
                if (lines.length - 1 == i)
                    FinalText += IntermediateText;
                else
                    FinalText += IntermediateText + "\n";
            }
            else {
                Splitted = IntermediateText.split(' ');
                for (var index = 0; index < Splitted.length; index++) {
                    Concatenated = Splitted[index].length;
                    if (Concatenated + SubText.length <= 50) {
                        if (index + 1 != Splitted.length) {
                            SubText += Splitted[index] + " ";
                        }
                        else {
                            SubText += Splitted[index];
                        }
                    }
                    else {
                        FinalText += SubText + "\n";
                        SubText = "";
                        if (index + 1 != Splitted.length) {
                            SubText = Splitted[index] + " ";
                        }
                        else {
                            SubText = Splitted[index];
                        }
                    }
                }
                if (SubText != '') {
                    FinalText += SubText;
                }
            }
        }
        document.getElementById(ID.id).value = FinalText;
        $('#' + ID.id).scrollTop($('#' + ID.id)[0].scrollHeight);
    }

</script>


<asp:TextBox ID="txt" onkeyup="CountChars(this);" Width="60%" runat="server" Rows="20"
                    Columns="50" TextMode="MultiLine" MaxLength="1000"></asp:TextBox>

var breakLines = function () {
    var i, limit = 35, lines = [], result = '', currentLine = '';
    var textBox = document.getElementById('example');
    var text = textBox.value;
    var words = text.split(' ');

    for (i = 0; i < words.length; i++) {
        var extendedLine = currentLine + ' ' + words[i];
        if (extendedLine.length > limit) {
            lines.push(currentLine);
            currentLine = words[i];
        } else {
            currentLine = extendedLine;
        }
    }

    if (currentLine.length > 0) {
        lines.push(currentLine);
    }


    for (i = 0; i < lines.length; i++) {
        result += lines[i] + '\r\n';
    }

    textBox.value = result;
};