0 
<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 个字符（仅针对可见性问题。）

4

7 回答 7

0

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

希望这可以帮助！

于 2012-06-21T18:58:25.800 回答
0

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

我希望这有帮助。

更新：2012 年 6 月 26 日

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

于 2012-06-21T19:27:41.757 回答
0

让 JakeJ 的评论更进一步，

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

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

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

  • 如果它对业务逻辑不重要而只是表示问题，那么您肯定希望使用普通样式来代替：使用 35 列大小的文本区域，并留给用户调整它的大小。

评论：

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

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

  • 对于“2空白”的要求-老实说，这对我来说听起来很愚蠢。看看浏览器为你做了什么。它适用于所有其他网站和 Web 应用程序。使用 CSS 设置样式（例如考虑添加填充），但请不要开始添加 JavaScript hack。如果要求来自您的客户，我相信您可以与他们交谈并解释为什么它不能按照他们想要的方式运作。

于 2012-06-26T08:23:42.537 回答
0

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

此代码应根据需要将文本包装为 35 个字符。这是一种限制输入的奇怪方式，但它应该可以工作。（以前的版本中存在错误。我认为这个最终大部分都可以使用）

于 2012-06-21T20:30:28.000 回答
0

感谢所有的例子。我致力于此，因为最终我需要在 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>

于 2019-10-30T01:41:06.560 回答
-1

这是一个简单的函数，可以在 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;
};
于 2012-06-28T14:15:35.563 回答
-3 
<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>
于 2012-06-28T06:22:36.573 回答