Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

Question

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

I have the following HTML textarea:

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

I have implemented a maxlength restriction using jQuery with the following function:

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);

});

My challenge is that I need users to enter only 10 characters in each row (line) and then move to the next line.

This function should also adhere to the maxlength restriction of the textarea.

I have attempted a solution from SO, but it does not move input to the next line.

You can view my JSFiddle example for reference.

javascript jquery html css textarea

Answer 1

Answer №1

Check out this code snippet:

    const maxLength = 100;
    const charactersPerLine = 10;

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

        if (e.which < 0x20) {
            // Ignore non-printable characters
            return; 
        }
        
        let length = this.value.length - ((this.value.match(/\n/g)||[]).length);
        
        if (length === maxLength) {
            e.preventDefault();
        } else if (length > maxLength) {
            // Truncate the input if it exceeds the limit
            this.value = this.value.substring(0, maxLength);
        }
        
        if (length % charactersPerLine == 0 && length !== 0 && length < maxLength) {
            $(this).val($(this).val() + '\n');
        }

    });

Answer 2

Check out this code snippet:

    const maxLength = 100;
    const charactersPerLine = 10;

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

        if (e.which < 0x20) {
            // Ignore non-printable characters
            return; 
        }
        
        let length = this.value.length - ((this.value.match(/\n/g)||[]).length);
        
        if (length === maxLength) {
            e.preventDefault();
        } else if (length > maxLength) {
            // Truncate the input if it exceeds the limit
            this.value = this.value.substring(0, maxLength);
        }
        
        if (length % charactersPerLine == 0 && length !== 0 && length < maxLength) {
            $(this).val($(this).val() + '\n');
        }

    });

Answer 3

Answer №2

Provided below is a plain JavaScript solution with comments for each statement:

var adjustTextAreaSize = function adjustTextAreaSize(fieldId, cols, rows){ 
    // Retrieve textarea text value 
    var value = document.getElementById(fieldId).value; 
    // Save current cursor position (useful for mid-text typing) 
    var currentPosition = document.getElementById(fieldId).selectionStart; 
    // Array to store separate text lines 
    var lines = []; 
    // Remove newline characters and limit the text based on number of rows 
    value = value.split("\n").join(""); 
    if(rows){ 
      value = value.substr(0, cols * rows); 
    } 
    // Check if text length exceeds specified columns 
    if(value.length > cols){ 
      // Divide the text into lines based on column length 
      for(var i = 0; i < value.length; i += cols){ 
        lines.push(value.substr(i, cols)); 
      } 
      // Reconstruct the text by joining the lines 
      document.getElementById(fieldId).value = lines.join("\n"); 
      // Reset cursor position to original location 
      document.getElementById(fieldId).selectionStart = document.getElementById(fieldId).selectionEnd = currentPosition; 
    } 
    // Handle scenarios where text length is less than or equal to max characters per line 
    else if(value.length < cols){ 
      // No action needed 
      return; 
    } 
    else{ 
      // Move to next line 
      document.getElementById(fieldId).value += "\n"; 
    } 
  };

Usage : Include directly in HTML using input event (e.g., 35 characters per line maximum for 6 lines)

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

Note: It's advisable to test this solution with caution when resizing the textarea.

Answer 4

Provided below is a plain JavaScript solution with comments for each statement:

var adjustTextAreaSize = function adjustTextAreaSize(fieldId, cols, rows){ 
    // Retrieve textarea text value 
    var value = document.getElementById(fieldId).value; 
    // Save current cursor position (useful for mid-text typing) 
    var currentPosition = document.getElementById(fieldId).selectionStart; 
    // Array to store separate text lines 
    var lines = []; 
    // Remove newline characters and limit the text based on number of rows 
    value = value.split("\n").join(""); 
    if(rows){ 
      value = value.substr(0, cols * rows); 
    } 
    // Check if text length exceeds specified columns 
    if(value.length > cols){ 
      // Divide the text into lines based on column length 
      for(var i = 0; i < value.length; i += cols){ 
        lines.push(value.substr(i, cols)); 
      } 
      // Reconstruct the text by joining the lines 
      document.getElementById(fieldId).value = lines.join("\n"); 
      // Reset cursor position to original location 
      document.getElementById(fieldId).selectionStart = document.getElementById(fieldId).selectionEnd = currentPosition; 
    } 
    // Handle scenarios where text length is less than or equal to max characters per line 
    else if(value.length < cols){ 
      // No action needed 
      return; 
    } 
    else{ 
      // Move to next line 
      document.getElementById(fieldId).value += "\n"; 
    } 
  };

Usage : Include directly in HTML using input event (e.g., 35 characters per line maximum for 6 lines)

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

Note: It's advisable to test this solution with caution when resizing the textarea.

Looking for a way to limit the number of characters allowed per line in a textarea using jQuery

Answer №1

Answer №2

Similar questions

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

Ways to retrieve every element inside a specific div container

Using jQuery to load the center HTML element

The server encountered an unexpected error while processing the request, possibly due to a

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What steps are involved in creating a table using Bootstrap framework?

Integrate an item into the request body utilizing the $.load() function in jQuery

"Implementing JavaScript Validation for Textboxes: A Step-by-Step Guide

Effective methods for eliminating timezone in JavaScript

"Troubleshooting issues with retrieving data from database using Ajax and

Retrieve JSON data from an external website

Tips for dynamically updating values when input numbers are modified using JavaScript

The variable "vue" is not properly defined within the instance, yet it is being called

What is the best way to display input fields only if the previous input has a valid value?

How do I prevent a specific word from being removed in a contenteditable div using JavaScript?

Incorporate socket.io into multiple modules by requiring the same instance throughout

Maximizing the potential of image srcset in HTML5

Applying a dynamic translate3d transformation on the ::after element using CSS3

What is the process of sending a file to a server and storing it in a MySQL database?

Re-sorting with _.sortBy() eliminates additional 0s from decimal values (transforming 0.10 to 0.1 and beyond)