Alterar valor de entrada em JavaScript

Para alterar o conteúdo atual de um campo de texto HTML, selecione o elemento desejado e atribua uma string à propriedade value. Isso atualiza o valor atual exibido pelo controle. Essa operação é diferente de alterar o atributo de conteúdo value, que representa o valor padrão do controle.

Altere o valor atual do campo de entrada com a propriedade value

Por exemplo, esta marcação define um ID e um valor inicial para o campo:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

<input type="text" id="user-name" value="Some Value">

Em uma página no navegador, selecione esse elemento com document.getElementById("user-name") e atribua o novo texto com input.value = "New value". A atribuição altera o valor atual; ela não reescreve o atributo HTML original. A mesma propriedade é usada quando alguém digita no campo.

Este é um exemplo JavaScript autônomo da atribuição. Ele usa um objeto pequeno para que a operação com a propriedade possa ser executada fora de um navegador; no código da página, input representa o elemento selecionado.

const input = { value: "Some Value" };
input.value = "New value";
console.log(input.value);

O exemplo JavaScript autônomo exibe:

New value

Selecione o campo de entrada

Use getElementById() quando o campo tiver um ID exclusivo. Ele retorna o elemento com esse ID ou null se não houver nenhum, então verifique o resultado antes de atribuir um valor caso o elemento talvez não esteja presente. Por exemplo, o código da página pode usar const input = document.getElementById("user-name"); e, em seguida, if (input) input.value = "New value";.

Use querySelector() quando um seletor CSS indicar como localizar o campo, como em document.querySelector('input[name="userName"]'). Ele retorna o primeiro elemento correspondente ou null se não houver correspondência. Torne o seletor específico o bastante para identificar o controle desejado, especialmente se a página tiver vários campos. Os exemplos de seletores aqui são trechos para páginas no navegador, não programas autônomos executáveis.

Também é possível acessar um formulário pela coleção document.forms. Para um formulário chamado profile com um controle chamado userName, o código da página pode acessar document.forms["profile"].elements["userName"]. Isso depende da existência desses nomes e é útil ao trabalhar com um formulário conhecido; para localizar elementos em geral, um ID ou seletor CSS costuma ser mais claro. document.forms é uma coleção, não uma função.

Entenda setAttribute() e o valor padrão

A propriedade value de um campo representa seu valor atual. O atributo de conteúdo value fornece o valor padrão, exposto pela propriedade defaultValue. Chamar setAttribute("value", "New default") altera esse atributo e o valor padrão. Isso não substitui, de forma geral, a atribuição a input.value quando o objetivo é alterar o que a pessoa vê no momento. Em particular, depois que o valor atual tiver sido alterado pela propriedade ou pela edição da pessoa usuária, mudar o valor padrão não significa que o valor atual também foi atualizado.

Use input.value = "New value" para definir imediatamente o valor atual. Use input.setAttribute("value", "New default") quando quiser alterar o valor padrão definido na marcação. Os nomes dessas operações são semelhantes, mas elas afetam alvos diferentes; escolha conforme a tarefa diga respeito ao estado atual do controle ou ao valor padrão.

Verifique o resultado e escolha uma abordagem

Depois de selecionar o campo, leia input.value para verificar seu valor atual. Se o valor não tiver mudado, primeiro confirme se o seletor encontrou o elemento desejado e se a atribuição foi executada depois que o campo ficou disponível na página. Se getElementById() ou querySelector() não encontrar um elemento, o resultado será null; tentar atribuir um valor por meio dele causará um erro, então proteja a consulta. Confirme também se o código atribui um valor à propriedade, em vez de alterar apenas o atributo padrão.

Para uma atualização direta, selecione pelo ID exclusivo com getElementById() ou por um seletor CSS adequado com querySelector() e, então, atribua um valor a value. Use document.forms quando souber os nomes do formulário e do controle. Use setAttribute() somente quando o objetivo for alterar o atributo de conteúdo ou o valor padrão. A diferença entre o valor atual e o padrão explica por que alterar um atributo talvez não atualize o texto exibido como esperado.