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

Switch button for updating text, icon, and displaying search bar

Modifying the default value setting in MUI Datepicker

Manipulate classes using jQuery to add or remove them

Exploring Three.js: The challenge of loading multiple material objects

Make sure to save the data in a file correctly by utilizing JSON.stringify before storing

The Nodejs express static directory is failing to serve certain files

Tips for locating and substituting a string in Javascript

Can you override CSS background image styles to ensure both images are loaded?

trouble with phonegap javascript ajax integration

Tips for stopping execution in Discord.js if the user no longer exists?

Could anyone clarify the workings of the async function in this specific useEffect situation?

What could be causing the issue of my navbar text not changing color using CSS?

Leveraging promises in conjunction with mongoose operations

a dedicated TypeScript interface for a particular JSON schema

The Jsoup function for sending data does not yield any results

Exploring the Power of Ajax in Struts2

The conditional statement for ajax is malfunctioning

Include a class in ul > li elements upon page load in Angular4

Does Less undergo a compilation process in a single pass?

Has the Angular 2 community established a standardized ecosystem?