Imposta il valore di un campo di input


Risposte:


820

Questo è un modo per farlo:

document.getElementById("mytext").value = "My value";

6
Lo farò, c'è un modo per rendere il valore NULL se l'utente fa clic sul campo?
SebastianOpperman,

4
Sì, assegna un gestore eventi al campo di input che cancella il valore al clic. Esempio: elem.onclick = clearField (); // indica una funzione che cancella il campo impostando il valore su niente, in modo simile alla risposta sopra.
James,

1
per me non ha funzionato. quanto sopra creerà l'attributo value?
Dchris,

2
Questo non sembra funzionare se stai cercando di modificare il valore per il tag di input stesso. Per chiarire, se ho un pulsante che dovrebbe cambiare il suo valore quando viene cliccato, non mi sembra possibile cambiarlo, né con "this.parentNode.getElementByTagName ('input'). Style.display = 'none ';" né usando this.style.display = 'none'; Inoltre, ho anche provato a usare ".style = display: none; ';" senza successo ...
MahNas92,

7
Questa e altre risposte alla domanda precedente sembrano ignorare la modifica del valore predefinito . L'uso .value = ...modifica solo il valore corrente. Il ripristino del modulo ( <input type="reset" />ad esempio) riporterà il valore a quello originale. Al contrario, setAttribute("value", ...)funziona correttamente in Firefox e Chrome. Il valore predefinito viene modificato ma il valore effettivo viene modificato solo se l'utente non lo ha già modificato. Tuttavia, setAttributenon è raccomandato a causa della compatibilità del browser. C'è qualche altra possibilità?
JojOatXGME,

55

se il modulo contiene un campo di input come

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

quindi puoi scrivere il codice in javascript come indicato di seguito per impostarne il valore come

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

52

Uso la funzione 'setAttribute':

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>

19
valuesi dovrebbe accedere direttamente usando la notazione punto: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute si utilizza solo set / getAttribute per gestire il valore originale. Dopo aver caricato DOM, .valuerappresenta il valore di lavoro effettivo dell'elemento.
Chris Baker,

4
@ChrisBaker Avrei +1000 questa risposta se potessi. Ho un'app di terze parti che analizza i campi di input per automatizzare l'applicazione (la mia pagina viene visualizzata in un controllo incorporato). Questo è uno scenario unico in cui i campi di input vengono utilizzati dall'app del client. I campi di input non sono stati ripristinati immediatamente dopo il postback utilizzando .value nella mia funzione di documento pronto. Quando avessi un postback asincrono successivo, l'utente avrebbe iniziato, avrebbe riutilizzato questi valori di input per automatizzare qualcosa su cui avevano cliccato prima e avevo bisogno della pagina per "dimenticarli". Questa è la salsa magica hacky di cui avevo bisogno. Grazie Pepe e Chris!
MikeTeeVee,

3
Sto usando Yii 2.0 e l'impostazione di .value = '' direttamente non eseguirà correttamente la validazione del modulo sul campo. L'uso di setAttribute ('value', '...') viene gestito correttamente. Grazie!
ekscrypto

Ho uno strano problema che ha risolto setAttribute. Il mio problema era cambiare il valore di un input attraverso una chiamata di funzione, cambiare anche gli ultimi input modificati.
SAMPro

Ho potuto impostare il valore su un input modale pop-up (testo) solo usando questa risposta. .value non ha funzionato per me. Grazie
Ula,

19

Prova questi.

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

// or

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

2
Non impostare mai valori non testuali su tali campi. Se
rileggi

18

La risposta è davvero semplice

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

O se vuoi evitare del tutto JavaScript: puoi definirlo semplicemente usando HTML

<input type="text" name="name" id="txt" value="My default value">

6
Incredibile che solo una persona qui abbia suggerito di usare l' valueattributo ...
Algy Taylor,

@AlgyTaylor ha apprezzato i tuoi sforzi e grazie per il tuo meraviglioso commento
php-coder

15

Se si utilizzano più moduli, è possibile utilizzare:

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>

3
Il motivo per cui mi piace questa risposta è che si utilizza l'attributo "nome" del modulo anziché l'ID elemento DOM, perché aggiungere un campo ID a ciascuno degli input del modulo quando non è necessario?
tremore

@tremor è totalmente d'accordo, e questa è la prima risposta che ho trovato usando "name" non "id".
avocado,

8

La semplice risposta non è in Javascript, il modo più semplice per ottenere il segnaposto è attraverso l'attributo segnaposto

<input type="text" name="text_box_1" placeholder="My Default Value" />

1
Il problema è che non funziona affatto per Internet Explorer. Se sai che non avrai client IE, allora sì, questa è la risposta migliore.
Sifu,

2
@Sifu Questo è probabilmente in realtà una buona cosa da fare, anche se non sai di avere clienti di IE (eventualmente in aggiunta ad una soluzione JavaScript) in quanto sarà anche ri-impostare il valore quando il campo viene svuotato.
ahruss,

1
@Sifu quando IE non supporta l'attributo segnaposto, usa IE e vai su www.1c3br3ak3r-multimedia.ca e guarda la barra di ricerca, usa l'attributo segnaposto
RWolfe

1
@Jdoonan non molto tempo fa in realtà - caniuse.com/#feat=input- segnaposto segnaposto è supportato in IE10 e
versioni successive

6

È semplice; Un esempio è:

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

4
document.getElementById("fieldId").value = "Value";

o

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

o

document.getElementById("fieldId").setAttribute('value','Value');

3
setAttribute ( 'valore', 'Valore'); non imposta il valore visibile nella casella di testo per me su Chrome.
Curtis,

1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


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

È inoltre possibile modificare il valore predefinito in un nuovo valore

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

1

Questa parte che usi in HTML

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

Questo è javaScript:

<script>
document.getElementById("latitude").value=25;
</script>

0

Puoi anche provare:

document.getElementById('theID').value = 'new value';

3
L'impostazione di un nuovo valore non sta impostando il valore predefinito. Pertanto, questo non risolve il problema. Dovresti dire che come il commento del post una volta che hai guadagnato abbastanza reputazione.
Daniel Cheung,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.