Defina o valor de um campo de entrada

442

Como você definiria o valor padrão de um <input>campo de texto do formulário em JavaScript?

SebastianOpperman
fonte

Respostas:

818

Esta é uma maneira de fazer isso:

document.getElementById("mytext").value = "My value";
James
fonte
6
Vou, existe uma maneira de tornar o vale NULL se o usuário clicar no campo?
SebastianOpperman
4
Sim, atribua um manipulador de eventos ao campo de entrada que limpa o valor ao clicar. Exemplo: elem.onclick = clearField (); // que apontaria para uma função que limpa o campo, definindo o valor como nothing, semelhante à resposta acima.
James
1
para mim não funcionou. o acima criará o atributo value?
Dchris
2
Isso não parece funcionar se você estiver tentando alterar o valor da própria tag de entrada. Para esclarecer, se eu tiver um botão que deve alterar seu valor quando ele é clicado, não consigo alterá-lo, nem por "this.parentNode.getElementByTagName ('input'). Style.display = 'none '; " nem usando this.style.display = 'none'; Também tentei usar ".style = display: none; ';" sem sucesso ...
MahNas92 5/16
7
Esta e outras respostas à pergunta acima parecem ignorar que o valor padrão deve ser alterado. O uso .value = ...altera apenas o valor atual. Redefinir o formulário (com, <input type="reset" />por exemplo) alterará o valor novamente para o original. Por outro lado, setAttribute("value", ...)funciona corretamente no Firefox e Chrome. O valor padrão é alterado, mas o valor real é alterado apenas se o usuário ainda não o tiver modificado. No entanto, setAttributenão é recomendado devido à compatibilidade do navegador. Existe alguma outra possibilidade?
JojOatXGME
55

se o seu formulário contiver um campo de entrada como

<input type='text' id='id1' />

então você pode escrever o código em javascript, conforme indicado abaixo, para definir seu valor como

document.getElementById('id1').value='text to be displayed' ; 
Varada
fonte
52

Eu uso a função 'setAttribute':

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>
Pepe Amoedo
fonte
18
valuedeve ser acessado diretamente usando a notação de ponto: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute, você usa apenas set / getAttribute para lidar com o valor original. Depois que o DOM é carregado, .valuerepresenta o valor real de trabalho do elemento.
22614 Chris Chris Baker
4
@ ChrisBaker Gostaria de marcar essa resposta com +1000, se pudesse. Eu tenho um aplicativo de terceiros que verifica os campos de entrada para automatizar o aplicativo (minha página é renderizada em um controle incorporado, ou seja). Este é um cenário único em que os campos de entrada são consumidos pelo aplicativo do cliente. Os campos de entrada não foram redefinidos imediatamente após a postagem usando .value na minha função de documento pronto. Quando eu tinha um postback assíncrono subsequente que o usuário iniciaria, ele reutilizaria esses valores de entrada para automatizar algo em que eles clicaram anteriormente e eu precisava da página para "esquecê-los". Este é o molho mágico hacky que eu precisava. Obrigado Pepe e Chris!
MikeTeeVee
3
Estou usando o Yii 2.0 e definindo o .value = '' diretamente não executaria corretamente a validação do formulário no campo. O uso de setAttribute ('value', '...') é tratado adequadamente. obrigado!
ekscrypto
Eu tenho um problema estranho que resolveu setAttribute. Meu problema foi alterar o valor de uma entrada através de uma chamada de função, alterar as últimas entradas alteradas também.
SAMPro
Eu poderia definir o valor como uma entrada modal pop-up (texto) usando apenas esta resposta. .value não funcionou para mim. Obrigado
Ula
19

Experimente estes.

document.getElementById("current").value = 12

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
fonte
2
Nunca defina valores não textuais para esses campos. Se você ler de volta você vai ler corda em alguns navegadores) (!)
socketpair
18

A resposta é realmente simples

// Your HTML text field

<input type="text" name="name" id="txt">

//Your javascript

<script type="text/javascript"> 
document.getElementById("txt").value = "My default value";
</script>

Ou, se você quiser evitar o JavaScript completamente: você pode defini-lo usando HTML

<input type="text" name="name" id="txt" value="My default value">
codificador php
fonte
6
Espantoso que apenas uma pessoa aqui tem sugerido usando o valueatributo ...
Algy Taylor
@AlgyTaylor apreciado o seu esforço e muito obrigado pela sua maravilhosa comentário
php-codificador
15

Se você estiver usando vários formulários, poderá usar:

<form name='myForm'>
    <input type='text' name='name' value=''>
</form>

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>
David Caissy
fonte
3
O motivo de eu gostar desta resposta é que você usa o atributo "name" do formulário em vez do ID do elemento DOM, por que adicionar um campo de ID a cada uma das entradas do formulário quando não é necessário?
tremor
@tremor totalmente de acordo, e esta é a primeira resposta que encontrei usando "nome" e não "id".
abacate
8

A resposta simples não está em Javascript. A maneira mais simples de obter o espaço reservado é através do atributo do espaço reservado

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
fonte
1
O problema é que ele não funciona no Internet Explorer. Se você sabe que não terá clientes do IE, sim, esta é a melhor resposta.
Sifu
2
@Sifu Este é provavelmente realmente uma boa coisa a fazer, mesmo se você não sabe que você tem clientes IE (possivelmente em adição a uma solução JavaScript) como ele irá também re-definir o valor quando o campo é esvaziado.
ahruss
1
@Sifu quando é que o IE não suporta o atributo de espaço reservado, use IE e vá para www.1c3br3ak3r-multimedia.ca e olhar para a barra de pesquisa, ele usa o atributo de espaço reservado
RWolfe
1
@Jdoonan não há muito tempo, na verdade - caniuse.com/#feat=input-placeholder espaço reservado é suportado no IE10 e até
danwellman
6

É simples; Um exemplo é:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
var elem = document.getElementById("example"); // Get text field
elem.value = "My default value"; // Change field
</script>
ultimatetechie
fonte
4
document.getElementById("fieldId").value = "Value";

ou

document.forms['formId']['fieldId'].value = "Value";

ou

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
fonte
3
setAttribute ('valor', 'Valor'); não define o valor visível na caixa de texto para mim no Chrome.
Curtis
1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


<script>
var form_value = document.getElementById("inputid").value;
</script>    

Você também pode alterar o valor padrão para um novo valor

<script>
document.getElementById("inputid").value = 4000;     
</script>
Tobiloba
fonte
1

Esta parte que você usa em html

<input id="latitude" type="text" name="latitude"></p>

Isto é javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
Amranur Rahman
fonte
0

Você também pode tentar:

document.getElementById('theID').value = 'new value';
Bogdan Mates
fonte
3
Definir um novo valor não está definindo o valor padrão. Portanto, isso não resolve o problema. Você deve dizer isso como comentário da postagem depois de ganhar reputação suficiente.
Daniel Cheung