Question

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

我需要在多行文本框中实现自动换行。我不能让用户写一行超过35个字符。我使用下面的代码，它精确地打破了每一行的指定字符，将单词切成两半。我们可以解决这个问题，以便如果当前行上没有足够的空间用于单词，我们会将整个单词移到下一行吗？

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

编辑 - 1

我必须在没有特定分词符号的情况下显示总共最多35个字符，并且需要保留右边两个字符的边距。同样，限制应该是35个字符，但总共需要37个空间（仅适用于可见性问题。）

Answer 1

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

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

然后在文档准备中添加：

$(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

然后在每个textarea上确保maxlength ='35'就像这样并添加一个反馈占位符...

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

希望这有帮助！

Answer 2

这是一项测试练习。这将打破35个字符的行。请务必设置cols="35"

我希望这会有所帮助。

更新：2012年6月26日

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

Answer 3

http://jsfiddle.net/g4Kez/4/

此代码应将文本换行为35个字符，如您所愿。这是一种限制输入的奇怪方法，但它应该有效。（以前的版本中有bug ...我认为这个版本最终可以使用）

Answer 4

将JakeJ的评论更进一步，

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

如果业务逻辑对每行不超过35个字符很重要，那么你肯定在服务器上执行此操作！您只能使用JavaScript来改进用户界面。但JavaScript不会保护您的服务器端逻辑免受“格式错误”的输入。
对于演示文稿，您可以使用已经从其他所有建议中获得的建议，并将输入字段的大小限制为35列。这不会更改发送到服务器的输入值，但无论如何您都必须在服务器上执行此操作。就像你正确注意到的那样，在较新的浏览器中，用户可以重新调整textarea的大小。这完全是网络状态：用户可以根据自己的风格调整演示文稿。 如果 - 且仅当 - 您真的需要限制，因为有业务逻辑，您可以disable the re-sizing feature。
如果不对业务逻辑很重要，但只是演示问题，那么肯定想要使用简单样式：使用35列大小的文本区域，并由用户调整大小。

说明：

请注意，如果使用JavaScript通过添加换行符来换行，则可以处理用户更改已经换行的行的用例。你重新合并并重新包装它们，还是会变得越来越难看？通过我刚才提到的方法，你不必处理这个问题。试试jsfiddle posted by Brett Holt。写一些文字直到它换行。然后返回第一行并删除一些字符（使用退格键，删除键对我使用FireFox不起作用）。你会明白我的意思。用户必须能够移除原始包装并让您的应用程序将该行重新包装在不同的位置。
默认情况下，textareas具有固定宽度的字体，因此无论是“m”还是“l”，每行都将限制为35个字符。但是你可能希望安全起见并在CSS中将字体设置为固定字体。
对于“2空白”的要求 - 说实话，这听起来很愚蠢。采取浏览器为您做的事情。它适用于所有其他网站和Web应用程序。使用CSS来设置样式（例如，考虑添加填充）但请不要开始添加JavaScript hacks。如果要求来自您的客户，我相信您可以与他们交谈，并解释为什么它不能按照他们想要的方式运作。

Answer 5

感谢所有示例。我之所以这样做，是因为最终我需要在SVG xml中自动换行（我的当前规范不支持自动换行）。

这也是我的编辑。 https://jsfiddle.net/vr_driver/7kr1vfq5/50/

function columncorrector() {
  var text = document.getElementById("TextBox1").value;
  var maxcolumnwidth = 40;
  var lengthSinceNewLine = function(input) {
    var lastNewLine = input.lastIndexOf("\n");
    if (lastNewLine == -1) {
      return input.length;
    } else {
      console.log("lnl: " + lastNewLine);
      console.log("input.length: " + input.length);
      return input.length - lastNewLine;
    }
  };

  console.log(lengthSinceNewLine(text));
  lines = text.split("\n").length;
  console.log("lines: " + lines);

  if (lines == 1) // without this, the first line always comes out one character longer
  {
    maxcolumnwidth_fix = maxcolumnwidth - 2;
  } else {
    maxcolumnwidth_fix = maxcolumnwidth - 1;
  }

  if (lengthSinceNewLine(text) >= maxcolumnwidth_fix) {
    if (text[text.length - 1] == " ") {
      text = text + "\n";
    } else {
      console.log("length:" + text.length);
      console.log(text.lastIndexOf(" "));
      if (text.lastIndexOf(" ") == "-1") {
        console.log("here 1");
        text = text + "-\n"; // a forced hyphen            
        document.getElementById("TextBox1").value = text;
      } else {
        var space = text.lastIndexOf(" ");
        text = text.substring(0, space) + "\n" + text.substring(space + 1, text.length);
        document.getElementById("TextBox1").value = text;
      }

    }
  }
};

.txt {
  width: 400px;
}

<textarea id="TextBox1" class="txt" rows="30" onkeydown="columncorrector()" onkeyup="columncorrector()"></textarea>

Answer 6

这是一个简单的函数，可以打破35个字符（或之前）的行。目前唯一失败的情况是，如果你有超过35个字符没有空格。如果你想在这个场景中进行一次艰难的休息，请告诉我，我会将其添加进去。

你可以看到它在JS Fiddle上工作 - 只需点击GO即可查看结果。

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

Answer 7

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

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

编辑 - 1

7 个答案: