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

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

---

有人能帮上忙吗？

你可以在表单提交（onsubmit）或文本字段的按键上调用此功能

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

---

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

每次出现onkeypress事件时，我都会检查当前行的长度，然后在最近的前一个空格处插入一个断点，当它超过72时。用户粘贴文本块的难度；然后，您必须检查上一个光标位置和新光标位置之间的所有线条长度，这是一个难题。您可能希望在每次按键时存储最后一个光标位置，并观察跳转

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

重复

---

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

很简单：它不能跨浏览器工作，或者至少对于Ubuntu下的Firefox25，每行的最大字符数似乎受到文本区域宽度的限制，取决于我可以输入+-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(''));
});

var maxLength=3；
$（'#mytext'）。on（'input focus keydown keydup'，function（）{
var text=$（this.val（）；
变量行=text.split（/（\r\n |\n |\r）/gm）；
对于（变量i=0；i最大长度）{
行[i]=行[i]。子字符串（0，maxLength）；
}
}
$（this.val（lines.join（“”））；
});

我还准备了一份报告。我希望这对某人有所帮助：）

最后，简单介绍一下该代码的工作原理：

• 该函数等待以下事件之一：input、focus、keydown、keyup（使用这么多事件可能看起来有点不必要，但我做了很多测试，发现这种组合可以交叉使用，并且总是触发，无论只输入单个字母、连续按下键或将文本粘贴到文本区域）
• 它获取textarea的值
• 然后，它将每个换行符处的textarea拆分为一个新的数组元素
• for循环迭代该数组，并检查数组中的每一行元素，如果它超过了之前设置的maxLength
• 如果一行超过maxLength，则该行在maxLength字符后被“截断”
• 最后，当没有超过maxLength字符的行剩余时，数组元素再次以字符串形式连接在一起

---

编辑：我现在发现的唯一限制是，当在行首或行内输入其他字符时，代码会在末尾“截断”字符串，而不是在添加字符的位置。在大多数情况下，这并不重要，但请记住：）无论如何，适当地更改此函数应该不会太困难，但在大多数情况下，这将浪费资源；）

另外，在服务器端试试这个。你可以用任何语言做。不仅仅是PHP

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

if（strlen（$textareaContent）检查：

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

为完成以前的解决方案而添加的一小段内容。

我还限制了行数。

它在旧系统中为我服务，其中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"));
    });
});


$（函数（）{
var maxLength=30；
var mawRow=4；
$（'#mytext'）。on（'input focus keydown keydup'，function（）{
//获取文本earea文本
var text=$（this.val（）；
//使用回车符拆分\n
变量行=text.split（“\n”）；
对于（变量i=0；i最大长度）{
行[i]=行[i]。子字符串（0，maxLength）；
}     
}
//关于supprime ce qui dépasse…：）
而（lines.length>4）{
line.pop（）；
}
//加入\n。
//设置文本区域
$（this.val（lines.join（“\n”））；
});
});
这里有一种方法可以限制文本区域的每行字符数和行数。为了使输入交互对用户来说更直观，它需要处理（1）输入值和（2）光标位置：

（a） 从文本区域读取值，（b）检测每行文本是否按照长度限制的要求过长，（c）将溢出文本从一行推到下一行，以及（d）将值写回文本区域
（a） 读取光标位置以存储光标位置，（b）将光标放置在用户在写入数据后预期的位置
请在此处查看代码笔：

这是基本的javascript代码（在Safari和Chrome上进行了测试，在将文本粘贴到textarea时也可以正常工作）：

var charactersPerLine=document.getElementById（“charactersPerLine”）.value；
var maxLines=document.getElementById（“maxLines”）.value；
var textOutput=“”；
var onPaste=false；
函数formatTextAsRequired（）{
/*
此函数处理两个方面：
1.（a）从文本区域读取值，（b）检测每行文本是否按照长度限制的要求过长，（c）将溢出文本从一行推到下一行，以及（d）将值写回文本区域。
2.（a）读取光标位置以存储光标位置，（b）将光标放置在用户在写入数据后预期的位置。
*/
var textInput=document.getElementById（“flexibleInputField”）.value；//1a:读取值
var inputAsRows=textInput.split（“\n”）；//从输入创建数组=>每个元素包含一行textarea
var inputAsOneLine=textInput.replace（/（\r\n\t |\n |\r\t）/gm，“”；//remove
<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"));
    });
});

var charactersPerLine=document.getElementById("charactersPerLine").value;
var maxLines=document.getElementById("maxLines").value;
var textOutput="";
var onPaste=false;

function formatTextAsRequired() {
  /*
  This function handles two aspects:
  1. (a) READ VALUE from the textarea, (b) DETECT IF TEXT PER LINE IS TOO LONG  as required by the length restrictions, (c) PUSH OVERFLOWING TEXT from a line to the next line and (d) WRITE VALUE back to the textarea.
  2. (a) READ THE CURSOR POSITION to store the cursor position, and (b) POSITION THE CURSOR where a user would expect it after WRITE DATA.
  */
  var textInput=document.getElementById("flexibleInputField").value;//1a: READ VALUE
  var inputAsRows=textInput.split("\n");// create array from input => each element contains one row of the textarea
  var inputAsOneLine=textInput.replace(/(\r\n\t|\n|\r\t)/gm,"");//remove all line-breaks
  var cursorPositionOnInput=document.getElementById("flexibleInputField").selectionStart;//2a: READ CURSOR POSITION
  var cursorOffsetAfterOutput=0;//set default value for cursor offset. cursor offset is needed when re-posiotioning the cursor after WRITE DATA

  var totalRows=inputAsRows.length; //don't put inputAsRows.length in the for statement, as the array is growing in the loop which results in an infinite loop
  var row;
  var lineBreakCount=0;
  var characterCount=0;
  for (row = 0; row < totalRows; ++row) {
    if(inputAsRows[row].length>charactersPerLine){ //1b DETECT IF TEXT PER LINE IS TOO LONG 
      if (inputAsRows[row+1] === undefined) {
        inputAsRows[row+1]="";// the row did not exist
        totalRows++;
        }
      //1c PUSH OVERFLOWING TEXT: move text that is too long for this row to the next row:
      inputAsRows[row+1]=inputAsRows[row].substring(charactersPerLine)+inputAsRows[row+1];
      inputAsRows[row]=inputAsRows[row].substring(0,charactersPerLine);
      //determine, if cursor was at the end of the line that got a line-break:
      var newOutput=inputAsRows.join("\n");
      if(newOutput.substr(cursorPositionOnInput-1,1)=="\n"){
        cursorOffsetAfterOutput=1; }
      }
    }

  if(inputAsRows.length<=maxLines && inputAsOneLine.length<=(maxLines*charactersPerLine)){//data is within max number of rows and max total digits
    textOutput=inputAsRows.join("\n");
    document.getElementById("flexibleInputField").rows=inputAsRows.length;//resize textarea
    document.getElementById("errors").innerHTML="";//remove error message
    document.getElementById("count").innerHTML=inputAsOneLine.length+"/"+(maxLines*charactersPerLine);//show digits count
    if(onPaste){ cursorOffsetAfterOutput=cursorOffsetOnPaste(textInput,cursorPositionOnInput,totalRows)
      }
    }
    else //data would be too long 
    {
    document.getElementById("errors").innerHTML="This field can only have "+maxLines+" lines with "+charactersPerLine+" characters per line.";//display error message
    document.getElementById("count").innerHTML="";//remove digits count
    cursorOffsetAfterOutput=-1;
  }
  document.getElementById("flexibleInputField").value=textOutput;//1d: WRITE VALUE
  document.getElementById("flexibleInputField").selectionStart=cursorPositionOnInput+cursorOffsetAfterOutput; //2b: POSITION CURSOR
  document.getElementById("flexibleInputField").selectionEnd=cursorPositionOnInput+cursorOffsetAfterOutput; //set a single cursor, not a selection
  onPaste=false;
}

function countLineBreaks(string,lengthFromStart){
  var left=string.substr(0,lengthFromStart);
  var countOfLinebreaks=(left.split("\n")).length;
  return countOfLinebreaks;
}

function handlePaste(){
  //some improvements when pasting content can still be made (particularly on the cursor position)
  onPaste=true;
}

function cursorOffsetOnPaste(textInput,cursorPositionOnInput,totalRows){
  //offset the cursor by 1 for each added line break:
  var countOld=countLineBreaks(textInput,cursorPositionOnInput);  
  var countNew=countLineBreaks(textOutput,cursorPositionOnInput+totalRows);
  cursorOffsetAfterOutput=countNew-countOld;
  return cursorOffsetAfterOutput;
}

<textarea data-row-maxlength = "35" data-limit-row-len = "true" rows = "4"></textarea>

$("textarea[data-limit-row-len=true]").on("input focus keydown keyup", function (event) {
    var maxlength = $(this).data("row-maxlength");

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