Enter value "X" after some characters

var qtd = 10
var qtdX = 0

var div = document.getElementById('t')

div.onkeyup = function(){
  var valor = div.value
  
  if(valor.length == qtd + qtdX){
     qtd = qtd + 10
     qtdX = qtdX + 1
     div.value = valor + 'X'
  }
}

 

<textarea id="t"></textarea>

Would that be more or less?

Compiling all the information I submitted:

The first, about using the jQuery library for such a trivial task. It is significantly increasing the payload of the application unnecessarily, worsening when system users have connection problems, such as commented . ( A joke on this subject to relax )

The second caution to be taken is with the event handled in JavaScript. I believe that the vast majority of bar code readers will paste the data into the field and, if so, the keypress , keyup and keydown events will not be triggered when a new bar code is read; only the paste event. However, if there are any players that trigger the first events, paste will not be triggered. That being said, the best JavaScript event that can be considered in this case is input . , because it is fired whenever the field value is changed, regardless of the source.

So, considering the following field in HTML:

<textarea name="conteudo" id="conteudo" rows="6" cols="50"></textarea>

We can start the JavaScript code:

const conteudo = document.getElementById("conteudo");

conteudo.addEventListener("input", function(event) {
  console.log(this.value);
});

For example, see working:

const conteudo = document.getElementById("conteudo");

conteudo.addEventListener("input", function(event) {
  console.log(this.value);
});

<textarea name="conteudo" id="conteudo" rows="6" cols="50"></textarea>

Whenever there is any change in the field content the new value will be displayed in the console. Now, just create the logic to separate the content into segments of size equal to 10. For this, we can use a very simple regular expression:

/.{1,10}/g

That is, take any character, other than the line break, in a sequence of 1 to 10 in length, as long as possible. Here's a simple example:

console.log("AAAAAAAAAABBBBBBBBBBEEEEEEEEEE12345678.".match(/.{1,10}/g))

From this, we can join with the previously created code and set the new value of the field. The logic will be very simple: whenever there is a change in the field, take the current value, separate into segments of length equal to 10 (or less), and add the character \n between them by setting the new value of the field. / p>

As I said, it will be interesting to use the \n character, since it is not visible and provides much better visual comfort by breaking the line with each new barcode.

The addition of the character between the segments can be done by the% method of the array :

console.log(['AAAAAAAAAA', 'BBBBBBBBBB', 'EEEEEEEEEE', '123'].join("\n"));

So, our final code would look something like:

const conteudo = document.getElementById("conteudo");

conteudo.addEventListener("input", function(event) {
  this.value = this.value.match(/.{1,10}/g).join("\n");
});

<textarea name="conteudo" id="conteudo" rows="6" cols="50"></textarea>

  

The logic has been developed considering that all bar code values will have the same length (10, in this example).

All this processing is done on the client side, but web rule number 1 is never trusting the data received from the user . A very simple example would be for the user to have JavaScript disabled in the browser, which could completely break the application. To avoid this, data validation and processing should be redone on the server side. The Caique's answer already gives a brief introduction to how it could be done in PHP.

If you need to manipulate the value entered in <textarea> after the form is submitted you must do this through PHP , do this on the client side as well as affect user experience , is not secure.

After sending the form to your PHP , use the chunk_split function. That allows you to split the string into pieces.

Assuming your textarea has the name='teste' property follows an example in PHP :

<?php
$teste = $_REQUEST['teste'];

echo chunk_split($teste, 10)
?>

If you really need to run this in client side , follow the example below:

Every 10 char Adds in the string the char specified.

function AlteraTexto(str, n) {
    var ret = [];
    var i;
    var len;

    for(i = 0, len = str.length; i < len; i += n) { //Percorre a string a cada 10 posições
       ret.push(str.substr(i, n))
    }

    return ret
};
var textarea = document.getElementById('teste');

var resultado = AlteraTexto(textarea.value, 10).join('\n');
textarea.value = resultado;

<textarea name="teste" id="teste" rows="6" cols="50">
AAAAAAAAAABBBBBBBBBBEEEEEEEEEE12345678.
</textarea>

Import jquery:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Set as you want, where X will be, if it is going to be another character and the textarea id.

$(function(){
  var campo = $('#conteudo');
  var posicao = 10;
  var separador = 'X';
  var c = 0;
  String.prototype.replaceAll = function(search, replacement) {
      var target = this;
      return target.split(search).join(replacement);
  };
  campo.keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 32) {
       return false;
    }
    c = (campo.val().replaceAll(separador,'').length);
    if(c % posicao == 0 && c != 0){
      campo.val(campo.val() + separador);
    }  
  });
});

Remembering that this type of code does not prevent the user from sending the textarea incorrectly, since it can disable javascript or even change the code using extensions, firebug or some similar tool.

Correct and check the code on the server where the user does not have access.