0

Tenho uma variável var string = 'TESTE', e pretendo fazer algo do tipo:

<input type="text" id="um" value="T">
<input type="text" id="dois" value="E">
<input type="text" id="tres" value="S">
<input type="text" id="quatro" value="T">
<input type="text" id="cinco"value="E">

Utilizando javascript, como isso é possível?

3 Respostas 3

2

Crie um array com os ids dos elementos alvo e o itere pelo método Array.prototype.forEach() com os parâmetros de callback v para valor e i para o índice do elemento iterado.
Com document.getElementById() passando v como parâmetro obtenha o respectivo elemento e altere seu valor configurando a propriedade value com o caractere i da string.

let str = "TESTE";

['um', 'dois', 'tres', 'quatro', 'cinco'].forEach(function(v, i) {
  document.getElementById(v).value = (i < str.length) ? str[i] : "";
});
<input type="text" id="um"><br>
<input type="text" id="dois"><br>
<input type="text" id="tres"><br>
<input type="text" id="quatro"><br>
<input type="text" id="cinco"><br>

1

Crie uma "div pai" para inserir seus inputs dentro, depois rode um for conforme o tamanho da sua string e então crie um elemento input e use o método charAt() para pegar o caractere daquela posição e inserir como value.
O código final ficará assim:

var str = 'TESTE';
var div = document.getElementById('div-pai');

for(let i=0; i < str.length; i++) {
  var input = document.createElement("input");
  input.type = "text";
  input.id = "campo" + (i+1);
  input.value = str.charAt(i);
  div.appendChild(input);
}
1

Para o primeiro input:

document.getElementById('um').value = string[0]

Segundo input:

document.getElementById('dois').value = string[1]

O índice sempre começa com 0, o índice 0 da variável string no caso representa a letra "T" o índice 1 representa a letra "e" e assim sussesivamente é só fazer o mesmo com os outros campos, agora você pode usar isso dentro de um loop for pra ficar de uma forma mais curta e elegante e automatizada, caso você tenha muitos inputs, eu já usaria mesmo nessa quantidade.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .