Limitar Caracteres digitado de um input

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>

>

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

>

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??

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>