如何将文本区域中的每行字符数量限制为一个固定值

In my text area, I should be able to enter only 72 characters per line. If I use, cols property set to 72, it is allowing more or less number of characters depending on character width.

在我的文本区域中，每行应该只能输入72个字符。如果我使用cols属性设置为72，它会根据字符宽度允许或多或少的字符数。

Can any one help how to do it?

有谁能帮忙做这件事吗?

7 个解决方案

#1

Duplicate of Textarea Limit characters per line Jquery or Javascript

每行Jquery或Javascript的文本区域限制字符的重复

<TEXTAREA NAME="HARD" COLS="72" ROWS="5" WRAP="HARD">

#2

I had the same problem and tried to solve it with JavaScript. Why not just take the HTML-Code suggested by Juan Mendes?

我遇到了同样的问题，试图用JavaScript来解决它。为什么不试试Juan Mendes建议的html代码呢?

Well, it's quite simple: It doesn't really work cross browser, or at least with Firefox 25 under Ubuntu, the maximum number of characters per line seems to be limited by the textarea width and depending on font size I could enter +-1 letter. But I wanted the number of characters per line limited to a specific value, no matter what the textarea's width is. So I came up with this code:

很简单:它不能跨浏览器运行，或者至少在Ubuntu下的Firefox 25上，每行字符的最大数量似乎受到文本区域宽度的限制，这取决于我可以输入+-1字母的字体大小。但是我希望每行字符的数量限制在一个特定的值，无论textarea的宽度是多少。所以我想到了这个密码:

var maxLength = 3;
$('#mytext').on('input focus keydown keyup', function() {
    var text = $(this).val();
    var lines = text.split(/(\r\n|\n|\r)/gm); 
    for (var i = 0; i < lines.length; i++) {
        if (lines[i].length > maxLength) {
            lines[i] = lines[i].substring(0, maxLength);
        }
    }
    $(this).val(lines.join(''));
});

I have also prepared a jsFiddle. I hope this helps someone :)

我还准备了一架小提琴。我希望这能帮助一些人:

And at the end just a short explanation of how this code works:

最后我简单解释一下这个代码是如何工作的:

The function waits for one of the following events: input, focus, keydown, keyup (it may look a bit unnecessary to use this many events but I tested a lot to find this combination which works crossbrowser and always fires, no matter if only single letters are entered, the key is continually pressed or text is pasted into the textarea)
函数等待下面的事件之一:输入焦点,keydown按键弹起(这可能看起来有点不必要的使用许多事件,但我测试了很多发现这种组合crossbrowser工作,总是火灾,无论如果只有单个字母输入,关键是不断地按下或文本粘贴到文本区域)
it gets the value of the textarea
它获取文本区域的值
then it splits the textarea at every linebreak into a new array element
然后，它将每个换行符处的textarea分割为一个新的数组元素
the for loop iterates over this array and checks for every line respectively element of the array, if it exceeds the before set maxLength
for循环遍历这个数组，如果它超过了之前设置的maxLength，则分别检查数组的每一行元素
if one line exceeds the maxLength, the line is "cut off" after maxLength characters
如果一行超过了maxLength，那么在maxLength字符之后，该行将被“截断”。
at the end, when there is no line left which is longer than maxLength characters, the array elements are joined together in a string again
最后，当没有一行比maxLength字符长时，数组元素将再次连接到一个字符串中

EDIT: The only constrain I found out now, is that when entering an additional character at the beginning or within the line, the code "cuts off" the string at the end and not where the characters have been added. This won't matter in most cases but just keep it in mind :) Anyway, it should not be too difficult to change this function appropriately, but in most cases it will be waste of resources ;)

编辑:我现在发现的唯一约束是，当在开头或行中输入额外的字符时，代码“切断”末尾的字符串，而不是添加字符的地方。这在大多数情况下都不重要，但请记住:)无论如何，适当地更改这个函数应该不会太难，但在大多数情况下，这将浪费资源;

#3

A small addition to complete a previous solution.
I also limit the number of lines.

完成以前的解决方案的一个小的补充。我还限制了行数。

It serves me in old systems where a comment of 4 lines is saved in 4 database entries.

它在旧系统中为我服务，在4个数据库条目中保存4行注释。

<textarea id="mytext" rows = "4" style="width:300px"></textarea>

$(function() {

    var maxLength = 30;
    var mawRow = 4;

    $('#mytext').on('input focus keydown keyup', function() {

        //get Textearea text
        var text = $(this).val();

        //Split with \n carriage return
        var lines = text.split("\n"); 

        for (var i = 0; i < lines.length; i++) {
            if (lines[i].length > maxLength) {
                lines[i] = lines[i].substring(0, maxLength);
            }     
        }

        //On supprime ce qui dépasse... :)
        while (lines.length > 4){    
            lines.pop();
        }

        //Join with \n.
        //Set textarea
        $(this).val(lines.join("\n"));
    });
});

#4

I would check each time there is a onkeypress event what the current line length is, and then insert a break at the nearest preceding space when it exceeds 72. The difficulty if the user pastes in a block of text; then, you'd have to check all the line lengths between the previous cursor position and the new one, which is a pain. You'd want to store the last cursor position each time there's a keypress, and watch for a jump.

每次出现onkeypress事件时，我都会检查当前行长度是多少，然后在它超过72时，在最近的前一个空格处插入一个断点。用户粘贴文本块的困难;然后，您必须检查前一个光标位置和新光标之间的所有行长度，这很麻烦。每次按下一个键时，都要存储最后一个光标的位置，并注意跳转。

There's code to get and set the cursor position here.

这里有获取和设置光标位置的代码。

#5

Try this for server side addtionally. You can do it in any language. Not just PHP.

在服务器端附加地尝试这个。你可以用任何语言做。不仅仅是PHP。

if (strlen($textareaContent) <= 72) {
    // Save textareaContent
}
else {
    echo "Your text is longer than 72 characters.";
}

#6

Check this:

检查:

var t=document.getElementById('textAreaId').value;
if(/^(?:[^\n]{0,73}\n)*$/g.test(t) !== true){
alert('input is invalid');
}

#7

-1

You can call this on form submit (onsubmit) or on keypress of textfield or whatever

你可以在提交表单(onsubmit)或textfield的按键上调用它

if (document.yourformname.textareaname.value.length > maxchars) {
 // too many
}

edit: this is javascript. You of course will also want to validate server-side.

编辑:这是javascript。当然，您还需要验证服务器端。

#1