Limitar Caracteres digitado de um input

[Jack Oliveira 1]

Ola pessoal estou tentando fazer um limitado de caracteres digitado de um input para outro input 

 

Ou seja tudo que for digitado no input 1 no input 2 aceitar apenas 20 caracteres por exemplo 

 

<script>
  $(document).ready(function() {
    $(".basic-usage").stringToSlug({
      setEvents: 'keyup keydown blur',
      getPut: '.permalink',
      space: '-',
      prefix: '',
      suffix: '',
      replace: '',
      AND: 'and',
      options: {},
      callback: false
      
    });
  });
  
  
  //Limitar caracteres no input 
  function LimitarInput(string = "") {
    string.value = string.value.substring(0,19);
    }
</script>

Input 1

Aqui o que for digitado ele mostrar no input 2. Isso ja faz só a quantidade mesmo de caracteres que não esta sendo controlado..

<input type="text" class="basic-usage" name="nome">

Input 2

 

Aqui no input 2 se for digitado direto ele mantém apenas os 20 Caracteres se tentar digitar mais ele não aceita...

<input type="text" onkeyup="LimitarInput(this)"  class="basic-usage permalink" name="slug">

 

Então o que eu quero é o que for digitado no input 1 no input 2 não deixa passar da quantidade permitida..

 

 

Desde já agradeço 

[Omar~ 87]

Tente algo como isso....

<p>De qualquer forma os input só vão aceitar 20 caracters</p>
<input maxlength="20" type="text" class="basic-usage" name="input-a" />
<input maxlength="20" type="text" class="basic-usage" name="input-b" />

<script>
    // Armazenamos todos elementos, teremos que pecorrer eles 2 vezes
    var input = document.querySelectorAll('input');
    // Quantidade de caracteres atuais
    var total_de_caracteres = 0;
    // Total de caracteres que podem co-existir
    var caracteres_permitidos = 10; // De acordo com seu tópico aqui seria 20, deixamos em 10 para exemplo

    // Percorremos os elementos para adicionar o evento neles
    for (var i = 0; i < input.length; i++) {
        input[i].addEventListener('keyup', digitar, false);
    }

    // Função que é executada através do ouvinte de eventos keyup
    function digitar(e) {
        // Começamos definindo que o total de caracteres é do input alvo
        total_de_caracteres = this.value.length;
        // Percorrendo os elementos novamente então
        for (var j = 0; j < input.length; j++) {
            // Se a volta atual do loop não for o input alvo aumentamos
            // o total de caracteres inseridos com o valor dos demais
            // inputs que existirem
            if (input[j] !== this) {
                total_de_caracteres += input[j].value.length;
            }
        }
        // Então se o total for maior que o permitido
        // Redefinimos o valor do input alvo
        if (total_de_caracteres > caracteres_permitidos) {
            // Substituir tudo que é depois da quantidade permitida 
            this.value = this.value.substring(0, caracteres_permitidos);
        }
    }
</script>

 

[Jack Oliveira 1]

Em 11/02/2023 at 04:39, Omar~ disse:

Tente algo como isso....

<p>De qualquer forma os input só vão aceitar 20 caracters</p>
<input maxlength="20" type="text" class="basic-usage" name="input-a" />
<input maxlength="20" type="text" class="basic-usage" name="input-b" />

<script>
    // Armazenamos todos elementos, teremos que pecorrer eles 2 vezes
    var input = document.querySelectorAll('input');
    // Quantidade de caracteres atuais
    var total_de_caracteres = 0;
    // Total de caracteres que podem co-existir
    var caracteres_permitidos = 10; // De acordo com seu tópico aqui seria 20, deixamos em 10 para exemplo

    // Percorremos os elementos para adicionar o evento neles
    for (var i = 0; i < input.length; i++) {
        input[i].addEventListener('keyup', digitar, false);
    }

    // Função que é executada através do ouvinte de eventos keyup
    function digitar(e) {
        // Começamos definindo que o total de caracteres é do input alvo
        total_de_caracteres = this.value.length;
        // Percorrendo os elementos novamente então
        for (var j = 0; j < input.length; j++) {
            // Se a volta atual do loop não for o input alvo aumentamos
            // o total de caracteres inseridos com o valor dos demais
            // inputs que existirem
            if (input[j] !== this) {
                total_de_caracteres += input[j].value.length;
            }
        }
        // Então se o total for maior que o permitido
        // Redefinimos o valor do input alvo
        if (total_de_caracteres > caracteres_permitidos) {
            // Substituir tudo que é depois da quantidade permitida 
            this.value = this.value.substring(0, caracteres_permitidos);
        }
    }
</script>

 

Ola omar obrigado pela ajuda...  vou fazer aqui

[Jack Oliveira 1]

Em 11/02/2023 at 04:39, Omar~ disse:

Tente algo como isso....

<p>De qualquer forma os input só vão aceitar 20 caracters</p>
<input maxlength="20" type="text" class="basic-usage" name="input-a" />
<input maxlength="20" type="text" class="basic-usage" name="input-b" />

<script>
    // Armazenamos todos elementos, teremos que pecorrer eles 2 vezes
    var input = document.querySelectorAll('input');
    // Quantidade de caracteres atuais
    var total_de_caracteres = 0;
    // Total de caracteres que podem co-existir
    var caracteres_permitidos = 10; // De acordo com seu tópico aqui seria 20, deixamos em 10 para exemplo

    // Percorremos os elementos para adicionar o evento neles
    for (var i = 0; i < input.length; i++) {
        input[i].addEventListener('keyup', digitar, false);
    }

    // Função que é executada através do ouvinte de eventos keyup
    function digitar(e) {
        // Começamos definindo que o total de caracteres é do input alvo
        total_de_caracteres = this.value.length;
        // Percorrendo os elementos novamente então
        for (var j = 0; j < input.length; j++) {
            // Se a volta atual do loop não for o input alvo aumentamos
            // o total de caracteres inseridos com o valor dos demais
            // inputs que existirem
            if (input[j] !== this) {
                total_de_caracteres += input[j].value.length;
            }
        }
        // Então se o total for maior que o permitido
        // Redefinimos o valor do input alvo
        if (total_de_caracteres > caracteres_permitidos) {
            // Substituir tudo que é depois da quantidade permitida 
            this.value = this.value.substring(0, caracteres_permitidos);
        }
    }
</script>

 

Ola omar

 

Testei mais não funcionou como preciso, questão dos input é o seguinte 

Neste input 1 o que eu for digitar ele vai me mostrar no input 2 ate ai esta belaza pois estou usando este script que esta funcionando..

$(document).ready(function() {
    $(".basic-usage").stringToSlug({
      setEvents: 'keyup keydown blur',
      getPut: '.permalink',
      space: '-',
      prefix: '',
      suffix: '',
      replace: '',
      AND: 'and',
      options: {},
      callback: false
      
    });
  });

Agora se eu for digitar o texto direto no input dois ele funciona o limitador entende??

 

Porem preciso mesmo sendo digitado no input 1 o texto que vai aparecer  dentro do input 2 quando chegar estes 20 caracteres o input 2 não permite mais caracteres nele entende...

 

Foi onde fiz este script que não quer dar certo 

 

function LimitarInput(string ="") {
   string.value = string.value.substring(0,19);
}

Sendo que o que for digitado no input 1 exemplo 

 

<input class="basic-usage" name="nome" value="Limitar caracteres dentro do input 2">

<input  onkeyup="LimitarInput(this)" class="basic-usage permalink" maxlength="20" name="slug" value="limitar-caracteres-dentro-do">

E mesmo que eu coloque maxlength="20"

Ele só vai limitar se eu digitar dentro do input2

Entende agora??

[Omar~ 87]

Para começar jogue fora essa coisa aí que chama de script que insiste em usar.

 

Então tá, mesmo a lógica não tendo nada haver, e o objetivo disso ser controverso....

Digitei no primeiro input, o que eu digitar substitui o valor no segundo input, mas o segundo input só pode ter no máximo 20 caracteres (está aqui a falta de lógica).

<input name="exemplo[]" /> <!-- input[0] -->
<input name="exemplo[]" data-recebe="" /> <!-- input[1] -->

<script>
    var input = document.getElementsByName('exemplo[]'),
        inputAlvo = {};

    input[0].addEventListener('keyup', digitar, false);
    input[1].addEventListener('keyup', digitar, false);

    function digitar(evento) {
        inputAlvo = evento.target;
        if (inputAlvo.dataset.recebe === '') {
            input[1].value = input[(input[0].value.length >= 1 ? 0 : 1)].value.substring(0, 20);
        } else {
            input[1].dispatchEvent(new Event('keyup'));
        }
    }
</script>