Move each four-character IT value to a new line

Question

Move each four-character IT value to a new line

const maxNumLength = 4;
    event = jQuery.Event("keypress")
    event.which = 13
    $('#input').on('input focus keydown keyup', function() {
        const inputValue = $(this).val();
        const linesArray = inputValue.split(/(\r\n|\n|\r)/gm); 
        for (let j = 0; j < linesArray.length; j++) {
            if (linesArray[j].length > maxNumLength) {
                linesArray[j] = linesArray[j].substring(0, maxNumLength);
            }
        }
        $(this).val(linesArray.join(''));
    });

I have implemented the code to move numbers to the next line after every 4 digits, but it does not seem to be working. Can someone please provide guidance on how to fix this issue?

javascript

Answer 1

Answer №1

Make sure to check for any line breaks in the input before dividing them into chunks again.

$('#mytext').on('input', function() {
  var value = $(this).val().split( "\n" ).join( "" );   
  var output = getChunks( value, 4 );
  $(this).val(output.join("\n"));
});

function getChunks(str, chunk) {
  var i, j;
  var output = [];
  var array = str.split( "" );
  for (i = 0, j = array.length; i < j; i += chunk) 
  {
    output.push( array.slice(i, i + chunk).join( "" ) );
  }
  return output;
}

Demo

$('#mytext').on('keydown', function(e) {
  if (e.which == 13 )
  {
     e.preventDefault();
     alert( "Enter was pressed" );
     this.blur();
     return false;
  }
});


$('#mytext').on('input', function() {
  var value = $(this).val().split( "\n" ).join( "" );   
  var output = getChunks( value, 4 );
  $(this).val(output.join("\n"));
});

function getChunks(str, chunk) {
  var i, j;
  var output = [];
  var array = str.split( "" );
  for (i = 0, j = array.length; i < j; i += chunk) 
  {
    output.push( array.slice(i, i + chunk).join( "" ) );
  }
  return output;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="mytext" name="text_body"></textarea>

Answer 2

Make sure to check for any line breaks in the input before dividing them into chunks again.

$('#mytext').on('input', function() {
  var value = $(this).val().split( "\n" ).join( "" );   
  var output = getChunks( value, 4 );
  $(this).val(output.join("\n"));
});

function getChunks(str, chunk) {
  var i, j;
  var output = [];
  var array = str.split( "" );
  for (i = 0, j = array.length; i < j; i += chunk) 
  {
    output.push( array.slice(i, i + chunk).join( "" ) );
  }
  return output;
}

Demo

$('#mytext').on('keydown', function(e) {
  if (e.which == 13 )
  {
     e.preventDefault();
     alert( "Enter was pressed" );
     this.blur();
     return false;
  }
});


$('#mytext').on('input', function() {
  var value = $(this).val().split( "\n" ).join( "" );   
  var output = getChunks( value, 4 );
  $(this).val(output.join("\n"));
});

function getChunks(str, chunk) {
  var i, j;
  var output = [];
  var array = str.split( "" );
  for (i = 0, j = array.length; i < j; i += chunk) 
  {
    output.push( array.slice(i, i + chunk).join( "" ) );
  }
  return output;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="mytext" name="text_body"></textarea>

Move each four-character IT value to a new line

Answer №1

Similar questions

Could one harness the power of SO's script for adding color to code within questions?

I am looking to showcase the JSON output on a ReactJS interface

Can I extract JSON data from the AJAX response?

Is there a way to execute code right before the jQuery submit() function is run?

After completing the installation of "node-pty" in an electron-forge project on Linux, I noticed that the pty.node.js file is not present. What is the proper way to install node-pty

What is the process for retrieving data from mongoDB and displaying it by year in a single row?

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

Generate a new entry by analyzing components from a separate array in a single line

How to fetch select element within a table by using jQuery

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

Switch between individual highcharts by selecting or deselecting checkboxes

Error: The function sendFile does not exist in the method res.status(...)

Enhancing TypeScript - Managing Variables within Namespace/Scope

Guide to integrating the Google identity services library in a React application

Building Unique Staircases with Three.js Geometry

Implementing various event listeners for asynchronous JavaScript and XML requests (

Refresh the jQuery Raty choice when clicked (jQuery)

What is the reason behind Chrome Dev Tools not automatically adding the parentheses when a method is selected?

Steps for creating a personalized query or route in feathersjs

Changing the Div heights in Material UI with grid layout customization