需要 jquery 或 javascript 来限制 textarea 中的每行长度答案

【问题标题】：Need jquery or javascript to restrict per line length in textarea需要 jquery 或 javascript 来限制 textarea 中的每行长度
【发布时间】：2017-12-20 22:36:23
【问题描述】：

我有以下 html 文本区域：

<textarea name="splitRepComments"   cols="20" rows="3" ></textarea>

我使用 jQuery 应用了最大长度限制。该函数如下：

var max = 100;
$('#splitRepComments').bind("keypress", function(e) {


    if (e.which < 0x20) {
        // e.which < 0x20, then it's not a printable character
        // e.which === 0 - Not a character
        return; // Do nothing
    }
    if (this.value.length == max) {
        e.preventDefault();
    } else if (this.value.length > max) {
        // Maximum exceeded
        this.value = this.value.substring(0, max);
    }
});

$('#splitRepComments').bind("paste", function(e) {


    setTimeout(function() {

        var e = jQuery.Event("keypress");
        e.which = 50; // # Some key code value
        $('#splitRepComments').trigger(e);
    }, 100);

});

我的障碍是我有要求，我们希望用户在每行（行）中只输入 10 个字符。在该输入之后应该采取下一行。

这个函数也应该遵守 textarea 的 maxlength 限制。

此外，我已经尝试过 SO 的以下解决方案，但没有将输入输入到下一行。

https://stackoverflow.com/a/19876218/1487469

我已准备好jsfiddle 供您参考。

【问题讨论】：

标签： javascript jquery html css textarea

【解决方案1】：

try this:

    var max = 100;
    var characterPerLine = 10;

    $("textarea[name='splitRepComments']").bind("keypress", function(e) {

        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return; // Do nothing
        }
        //calculate length excluding newline character
        var length =  this.value.length - ((this.value.match(/\n/g)||[]).length);
        if (length == max) {
            e.preventDefault();
        } else if (length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }
        if (length % characterPerLine == 0 && length!=0 && length < max)                           {
            $(this).val($(this).val()+'\n');
        }

    });

【讨论】：

当我设置 max = 20;第一行我可以输入 11 和第二行 9。你检查了吗？

【解决方案2】：

这是一个纯 JavaScript 的解决方案（您可以随意将其转换为 JQuery），我尝试为每个语句合并 cmets：

var manageTextAreaSize = function manageTextAreaSize(fieldId, cols, rows){ 
    // Get textarea text value 
    var value = document.getElementById(fieldId).value; 
    // Save current cursor position (for mid text typing) 
    var currentPosition = document.getElementById(fieldId).selectionStart; 
    // Arraye will be used to save separate text lines 
    var lines = []; 
    // Remove newline characters (by splitting the text using newline character as separator then joining by blank) 
    // then cut off extra characters (for limited number of rows only) 
    value = value.split("\n").join(""); 
    if(rows){ 
      value = value.substr(0, cols * rows); 
    } 
    // If text length is superior to max number of characters (more than one line) 
    if(value.length > cols){ 
      // Split text by lines of max character length 
      for(var i = 0; i < value.length; i += cols){ 
        lines.push(value.substr(i, cols)); 
      } 
      // Reassemble text into the text are by joining separate lines 
      document.getElementById(fieldId).value = lines.join("\n"); 
      // Reposition cursor back to previously saved position (before resizing text) 
      document.getElementById(fieldId).selectionStart = document.getElementById(fieldId).selectionEnd = currentPosition; 
    } 
    // If text length is inferior to max number of characters (less than on line) 
    else if(value.length < cols){ 
      // Do nothing ! 
      return; 
    } 
    // If text length is equal to max number of characters (one line only) 
    else{ 
      // Go to next line 
      document.getElementById(fieldId).value += "\n"; 
    } 
  };

用法：在输入事件中直接到 HTML（在下面的示例中：每行 35 个字符，最多 6 行）

<textarea id="myTextArea" cols="70" rows="20" style="resize: none" oninput="manageTextAreaSize(this.id, 35, 6);"></textarea>

注意：我没有在没有调整大小的情况下对此进行测试，因此在使用此解决方案时要小心调整大小！

【讨论】：