Ustaw wartość pola wejściowego

443

Jak ustawić domyślną wartość <input>pola tekstowego formularza w JavaScript?

SebastianOpperman
źródło

Odpowiedzi:

819

Jest to jeden ze sposobów:

document.getElementById("mytext").value = "My value";
James
źródło
6
Zrobię to, czy istnieje sposób, aby wartość dolna była zerowa, jeśli użytkownik kliknie pole?
SebastianOpperman
4
Tak, przypisz moduł obsługi zdarzeń do pola wejściowego, które wyczyści wartość po kliknięciu. Przykład: elem.onclick = clearField (); // który wskazywałby na funkcję, która czyści pole, ustawiając wartość na nic, podobnie do powyższej odpowiedzi.
James
1
dla mnie to nie działało. czy powyższe utworzy atrybut wartości?
Dchris
2
Nie wydaje się to działać, jeśli próbujesz zmienić wartość samego tagu wejściowego. Aby wyjaśnić, jeśli mam przycisk, który powinien zmienić jego wartość po kliknięciu, nie wydaje mi się, że mogę go zmienić, ani przez „this.parentNode.getElementByTagName ('input'). Style.display = 'none „;” ani za pomocą this.style.display = 'none'; Próbowałem nawet użyć „.style = display: none; ';” bez powodzenia ...
MahNas92,
7
Ta i inne odpowiedzi na powyższe pytanie wydają się ignorować zmianę wartości domyślnej . Używanie .value = ...zmienia tylko bieżącą wartość. Zresetowanie formularza ( <input type="reset" />na przykład) spowoduje zmianę wartości z powrotem na pierwotną. Natomiast setAttribute("value", ...)działa poprawnie w Firefox i Chrome. Wartość domyślna jest zmieniana, ale wartość rzeczywista jest zmieniana tylko wtedy, gdy użytkownik jeszcze jej nie zmodyfikował. Nie setAttributejest to jednak zalecane ze względu na kompatybilność przeglądarki. Czy jest jakaś inna możliwość?
JojOatXGME
55

jeśli formularz zawiera pole wprowadzania, takie jak

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

następnie możesz napisać kod w javascript, jak podano poniżej, aby ustawić jego wartość jako

document.getElementById('id1').value='text to be displayed' ; 
Varada
źródło
52

Używam funkcji „setAttribute”:

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>
Pepe Amoedo
źródło
19
valuenależy uzyskać bezpośredni dostęp za pomocą notacji kropkowej: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute Używasz tylko set / getAttribute do obsługi oryginalnej wartości. Po załadowaniu DOM .valuereprezentuje rzeczywistą wartość roboczą elementu.
Chris Baker
4
@ChrisBaker Chciałbym +1000 tej odpowiedzi, gdybym mógł. Mam aplikację innej firmy, która skanuje pola wejściowe w celu zautomatyzowania aplikacji (moja strona renderuje się w osadzonym, tj. Sterującym). Jest to unikalny scenariusz, w którym pola wprowadzania danych są wykorzystywane przez aplikację klienta. Pola wejściowe nie zostały zresetowane natychmiast po zwrotnym użyciu .value w mojej funkcji gotowości dokumentu. Gdy miałem później asynchroniczne sprzężenie zwrotne, użytkownik inicjowałby, używałby tych wartości wejściowych do automatyzacji czegoś, co kliknął wcześniej i potrzebowałem strony, aby je „zapomnieć”. To jest hacky magiczny sos, którego potrzebowałem. Dziękuję Pepe i Chris!
MikeTeeVee,
3
Korzystam z Yii 2.0 i ustawienie .value = '' bezpośrednio nie uruchamiałoby poprawnie sprawdzania poprawności formularza w polu. Korzystanie z setAttribute („wartość”, „...”) jest obsługiwane poprawnie. dzięki!
ekscrypto
Mam dziwny problem, który został rozwiązany setAttribute. Moim problemem była zmiana wartości wejścia poprzez wywołanie funkcji, zmiana ostatnio zmienionych danych wejściowych.
SAMPro
Mógłbym ustawić wartość na pop-up modalne wejście (tekst) tylko przy użyciu tej odpowiedzi. .value nie działało dla mnie. Dziękuję
Ula
19

Wypróbuj te.

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

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
źródło
2
Nigdy nie ustawiaj wartości nietekstowych na takie pola. Jeśli przeczytasz, przeczytasz ciąg (!) W niektórych przeglądarkach)
socketpair
18

Odpowiedź jest naprawdę prosta

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

Lub jeśli chcesz całkowicie uniknąć JavaScript: możesz to zdefiniować tylko za pomocą HTML

<input type="text" name="name" id="txt" value="My default value">
koder php
źródło
6
Zadziwiające, że tylko jedna osoba tutaj zasugerowała użycie valueatrybutu ...
Algy Taylor
@AlgyTaylor doceniła twój wysiłek i dziękuję za wspaniały komentarz
koder php
15

Jeśli używasz wielu formularzy, możesz użyć:

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>
David Caissy
źródło
3
Powód, dla którego podoba mi się ta odpowiedź, polega na tym, że używasz atrybutu „nazwa” formularza zamiast identyfikatora elementu DOM. Po co dodawać pole ID do każdego z danych wejściowych formularza, gdy nie jest to konieczne?
drżenie
@tremor całkowicie się zgodził, i to jest pierwsza odpowiedź, którą znalazłem używając „name” a nie „id”.
awokado
8

Prosta odpowiedź nie jest w języku Javascript. Najprostszym sposobem uzyskania symbolu zastępczego jest użycie atrybutu placeholder

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
źródło
1
Problem polega na tym, że w ogóle nie działa w przeglądarce Internet Explorer. Jeśli wiesz, że nie będziesz mieć klientów IE, to tak, to najlepsza odpowiedź.
Sifu,
2
@Sifu To chyba rzeczywiście dobrą rzeczą do zrobienia, nawet jeśli nie wiesz, że masz klientów IE (ewentualnie w uzupełnieniu do roztworu JavaScript), jak również ponownie ustawić wartość, gdy pole jest opróżniany.
ahruss
1
@Sifu, kiedy IE nie obsługiwał atrybutu symbolu zastępczego, użyj IE i przejdź do www.1c3br3ak3r-multimedia.ca i spójrz na pasek wyszukiwania, używa atrybutu
symbolu
1
@Jdoonan nie tak dawno temu - caniuse.com/#feat=input-placeholder symbol zastępczy jest obsługiwany w IE10 i
nowszych wersjach
6

To proste; Przykładem jest:

<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
źródło
4
document.getElementById("fieldId").value = "Value";

lub

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

lub

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
źródło
3
setAttribute („wartość”, „wartość”); nie ustawia dla mnie widocznej wartości w polu tekstowym w Chrome.
Curtis
1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


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

Możesz także zmienić wartość domyślną na nową

<script>
document.getElementById("inputid").value = 4000;     
</script>
Tobiloba
źródło
1

Ta część, której używasz w HTML

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

To jest javaScript:

<script>
document.getElementById("latitude").value=25;
</script>
Amranur Rahman
źródło
0

Możesz także spróbować:

document.getElementById('theID').value = 'new value';
Bogdan Mates
źródło
3
Ustawienie nowej wartości nie oznacza ustawienia wartości domyślnej. Dlatego to nie rozwiązuje problemu. Powinieneś to powiedzieć jako komentarz do wpisu, gdy zdobędziesz wystarczającą reputację.
Daniel Cheung