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

Question

我有以下html textarea：

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

我使用jQuery应用了maxlength限制。功能如下：

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准备供您参考。

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

    });

Answer 2

这是一个纯JavaScript的解决方案（您可以根据需要将其转换为JQuery），我尝试为每个语句合并注释：

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> 

注意：我没有调整大小没有调整大小，所以在使用这个解决方案调整大小时要小心！