Stellen Sie den Wert eines Eingabefeldes ein

442

Wie würden Sie den Standardwert eines Formulartextfelds <input>in JavaScript festlegen ?

SebastianOpperman
quelle

Antworten:

818

Dies ist eine Möglichkeit:

document.getElementById("mytext").value = "My value";
James
quelle
6
Ich werde, gibt es eine Möglichkeit, das Tal auf NULL zu setzen, wenn der Benutzer auf das Feld klickt?
SebastianOpperman
4
Ja, weisen Sie dem Eingabefeld einen Ereignishandler zu, der den Wert beim Klicken löscht. Beispiel: elem.onclick = clearField (); // das würde auf eine Funktion verweisen, die das Feld löscht, indem der Wert auf nichts gesetzt wird, ähnlich wie in der obigen Antwort.
James
1
bei mir hat es nicht geklappt. Wird das oben genannte Wertattribut erstellt?
Dchris
2
Dies scheint nicht zu funktionieren, wenn Sie versuchen, den Wert für das Eingabe-Tag selbst zu ändern. Wenn ich eine Schaltfläche habe, deren Wert sich beim Klicken ändern soll, kann ich sie anscheinend nicht ändern, auch nicht durch "this.parentNode.getElementByTagName ('input'). Style.display = 'none '; " noch mit this.style.display = 'none'; Außerdem habe ich sogar versucht, ".style = display: none; ';" ohne Erfolg ...
MahNas92
7
Diese und andere Antworten auf die obige Frage scheinen zu ignorieren, dass der Standardwert geändert werden soll. Mit .value = ...wird nur der aktuelle Wert geändert. Durch Zurücksetzen des Formulars ( <input type="reset" />z. B. mit) wird der Wert wieder auf den ursprünglichen Wert zurückgesetzt. Funktioniert dagegen setAttribute("value", ...)ordnungsgemäß in Firefox und Chrome. Der Standardwert wird geändert, der tatsächliche Wert wird jedoch nur geändert, wenn der Benutzer ihn noch nicht geändert hat. Wird setAttributejedoch aus Gründen der Browserkompatibilität nicht empfohlen. Gibt es eine andere Möglichkeit?
JojOatXGME
55

wenn Ihr Formular ein Eingabefeld wie enthält

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

Dann können Sie den Code wie unten angegeben in Javascript schreiben, um seinen Wert auf zu setzen

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

Ich benutze die Funktion 'setAttribute':

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>
Pepe Amoedo
quelle
18
valuesollte direkt mit der Punktnotation zugegriffen werden: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute Sie verwenden nur set / getAttribute, um mit dem ursprünglichen Wert umzugehen. Stellt nach dem Laden des DOM .valueden tatsächlichen Arbeitswert des Elements dar.
Chris Baker
4
@ ChrisBaker Ich würde diese Antwort +1000, wenn ich könnte. Ich habe eine Drittanbieter-App, die Eingabefelder scannt, um die Anwendung zu automatisieren (meine Seite wird in einem eingebetteten, dh Steuerelement gerendert). Dies ist ein einzigartiges Szenario, in dem Eingabefelder von der Client-App verwendet werden. Eingabefelder wurden nicht sofort nach dem Postback mit .value in meiner Dokumentbereitschaftsfunktion zurückgesetzt. Wenn ich ein nachfolgendes asynchrones Postback hatte, das der Benutzer initiierte, verwendete er diese Eingabewerte wieder, um etwas zu automatisieren, auf das er zuvor geklickt hatte, und ich brauchte die Seite, um sie zu "vergessen". Dies ist die hackige magische Sauce, die ich brauchte. Danke Pepe und Chris!
MikeTeeVee
3
Ich verwende Yii 2.0 und setze .value = '' direkt, um die Formularüberprüfung für das Feld nicht ordnungsgemäß auszuführen. Die Verwendung von setAttribute ('value', '...') wird ordnungsgemäß behandelt. Vielen Dank!
Ekscrypto
Ich habe ein seltsames Problem, das mit gelöst wurde setAttribute. Mein Problem bestand darin, den Wert einer Eingabe durch einen Funktionsaufruf zu ändern und auch die zuletzt geänderten Eingaben zu ändern.
SAMPro
Nur mit dieser Antwort konnte ich einen Wert für eine modale Popup-Eingabe (Text) festlegen. .value hat bei mir nicht funktioniert. Vielen Dank
Ula
19

Probieren Sie diese aus.

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

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
quelle
2
Setzen Sie niemals Nicht-Text-Werte auf solche Felder. Wenn Sie zurücklesen, lesen Sie Zeichenfolge (!) In einigen Browsern)
Socketpair
18

Die Antwort ist wirklich einfach

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

Oder wenn Sie JavaScript ganz vermeiden möchten: Sie können es nur mit HTML definieren

<input type="text" name="name" id="txt" value="My default value">
PHP-Codierer
quelle
6
Erstaunlich, dass nur eine Person hier vorgeschlagen hat, das valueAttribut zu verwenden ...
Algy Taylor
@AlgyTaylor schätzte Ihre Mühe und danke für Ihren wunderbaren Kommentar
PHP-Coder
15

Wenn Sie mehrere Formulare verwenden, können Sie Folgendes verwenden:

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>
David Caissy
quelle
3
Der Grund, warum mir diese Antwort gefällt, ist, dass Sie das Attribut "name" des Formulars anstelle der DOM-Element-ID verwenden. Warum sollten Sie jeder Formulareingabe ein ID-Feld hinzufügen, wenn Sie dies nicht benötigen?
Zittern
@tremor stimmte vollkommen zu, und dies ist die erste Antwort, die ich mit "Name" und nicht mit "ID" fand.
Avocado
8

Die einfache Antwort ist nicht in Javascript. Der einfachste Weg, den Platzhalter zu erhalten, ist das Platzhalterattribut

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
quelle
1
Das Problem dabei ist, dass es für Internet Explorer überhaupt nicht funktioniert. Wenn Sie wissen, dass Sie keine IE-Clients haben werden, ist dies die beste Antwort.
Sifu
2
@Sifu Dies ist wahrscheinlich eine gute Sache, auch wenn Sie wissen, dass Sie IE-Clients haben (möglicherweise zusätzlich zu einer JavaScript-Lösung), da der Wert auch beim Leeren des Felds zurückgesetzt wird.
Ahruss
1
@Sifu Wenn IE das Platzhalterattribut nicht unterstützt hat, verwenden Sie IE und gehen Sie zu www.1c3br3ak3r-multimedia.ca und sehen Sie sich die Suchleiste an. Es verwendet das Platzhalterattribut
RWolfe
1
@Jdoonan vor nicht allzu langer Zeit tatsächlich - caniuse.com/#feat=input-placeholder Platzhalter wird in IE10 und
höher
6

Es ist einfach; Ein Beispiel ist:

<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
quelle
4
document.getElementById("fieldId").value = "Value";

oder

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

oder

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
quelle
3
setAttribute ('Wert', 'Wert'); legt den sichtbaren Wert im Textfeld für mich in Chrome nicht fest.
Curtis
1
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


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

Sie können den Standardwert auch in einen neuen Wert ändern

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

Diesen Teil verwenden Sie in HTML

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

Das ist JavaScript:

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

Sie können auch versuchen:

document.getElementById('theID').value = 'new value';
Bogdan Kumpels
quelle
3
Durch das Festlegen eines neuen Werts wird nicht der Standardwert festgelegt. Daher löst dies das Problem nicht. Sie sollten das als Kommentar des Beitrags sagen, sobald Sie genug Ruf gewonnen haben.
Daniel Cheung