Définissez la valeur d'un champ de saisie

444

Comment définiriez-vous la valeur par défaut d'un <input>champ de texte de formulaire en JavaScript?

javascript html forms input SebastianOpperman
la source

Réponses:

820

C'est une façon de procéder:

document.getElementById("mytext").value = "My value";
James
la source
6
Je vais le faire, existe-t-il un moyen de rendre la valeur NULL si l'utilisateur clique sur le champ?
SebastianOpperman
4
Oui, affectez un gestionnaire d'événements au champ de saisie qui efface la valeur en cliquant. Exemple: elem.onclick = clearField (); // qui pointerait vers une fonction qui efface le champ en définissant la valeur sur rien, similaire à la réponse ci-dessus.
James
1
pour moi ça n'a pas marché. ce qui précède créera-t-il l'attribut value?
Dchris
2
Cela ne semble pas fonctionner si vous essayez de modifier la valeur de la balise d'entrée elle-même. Pour clarifier, si j'ai un bouton qui devrait changer sa valeur quand il est cliqué, je ne semble pas pouvoir le changer, ni par "this.parentNode.getElementByTagName ('input'). Style.display = 'none ";" ni en utilisant this.style.display = 'none'; De plus, j'ai même essayé d'utiliser ".style = display: none; ';" sans succès ...
MahNas92
7
Cela et d'autres réponses à la question ci-dessus semblent ignorer que la valeur par défaut doit être modifiée. L'utilisation .value = ...ne modifie que la valeur actuelle. La réinitialisation du formulaire (avec <input type="reset" />par exemple) redéfinira la valeur sur celle d'origine. En revanche, setAttribute("value", ...)fonctionne correctement dans Firefox et Chrome. La valeur par défaut est modifiée mais la valeur réelle n'est modifiée que si l'utilisateur ne l'a pas déjà modifiée. Cependant, setAttributen'est pas recommandé en raison de la compatibilité du navigateur. Y a-t-il une autre possibilité?
JojOatXGME
55

si votre formulaire contient un champ de saisie comme 

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

alors vous pouvez écrire le code en javascript comme indiqué ci-dessous pour définir sa valeur comme

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

J'utilise la fonction 'setAttribute': 

<input type="text" id="example"> // Setup text field 
<script type="text/javascript"> 
  document.getElementById("example").setAttribute('value','My default value');
</script>
Pepe Amoedo
la source
19
valuedoit être accessible directement en utilisant la notation par points: developer.mozilla.org/en-US/docs/Web/API/Element.setAttribute vous utilisez uniquement set / getAttribute pour gérer la valeur d'origine. Une fois DOM chargé, .valuereprésente la valeur de travail réelle de l'élément.
Chris Baker du
4
@ChrisBaker Je voudrais +1000 cette réponse si je pouvais. J'ai une application tierce qui scanne les champs de saisie pour automatiser l'application (ma page s'affiche dans un contrôle intégré, par exemple). Il s'agit d'un scénario unique où les champs de saisie sont consommés par l'application du client. Les champs de saisie n'ont pas été réinitialisés immédiatement après la publication à l'aide de .value dans la fonction de mon document prêt. Lorsque j'avais une publication asynchrone ultérieure que l'utilisateur initierait, il réutiliserait ces valeurs d'entrée pour automatiser quelque chose sur lequel il avait cliqué plus tôt et j'avais besoin de la page pour les "oublier". C'est la sauce magique hacky dont j'avais besoin. Merci Pepe et Chris!
MikeTeeVee
3
J'utilise Yii 2.0 et définir directement .value = '' ne fonctionnerait pas correctement la validation de formulaire sur le terrain. L'utilisation de setAttribute ('value', '...') est correctement gérée. Merci!
ekscrypto
J'ai un problème étrange qui a résolu setAttribute. Mon problème était de changer la valeur d'une entrée via un appel de fonction, de changer également les dernières entrées modifiées.
SAMPro
Je pourrais définir la valeur d'une entrée modale contextuelle (texte) uniquement en utilisant cette réponse. .value n'a pas fonctionné pour moi. Merci
Ula
19

Essayez-les. 

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

// or

var current = document.getElementById("current");
current.value = 12
dallinchase
la source
2
Ne définissez jamais de valeurs non textuelles sur de tels champs. Si vous
relisez,
18

La réponse est vraiment simple 

// 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 si vous voulez éviter complètement JavaScript: vous pouvez le définir en utilisant simplement HTML

<input type="text" name="name" id="txt" value="My default value">
php-coder
la source
6
Incroyable qu'une seule personne ici a suggéré d'utiliser l' valueattribut ...
Algy Taylor
@AlgyTaylor a apprécié vos efforts et merci pour votre merveilleux commentaire
php-coder
15

Si vous utilisez plusieurs formulaires, vous pouvez utiliser:

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

<script type="text/javascript"> 
    document.forms['myForm']['name'].value = "New value";
</script>
David Caissy
la source
3
La raison pour laquelle j'aime cette réponse, c'est que vous utilisez l'attribut "nom" du formulaire plutôt que l'ID de l'élément DOM, pourquoi ajouter un champ ID à chacune des entrées du formulaire lorsque vous n'en avez pas besoin?
tremblements
@tremor était tout à fait d'accord, et c'est la première réponse que j'ai trouvée en utilisant "nom" et non "id".
avocat
8

La réponse simple n'est pas en Javascript, le moyen le plus simple d'obtenir l'espace réservé consiste à utiliser l'attribut d'espace réservé

<input type="text" name="text_box_1" placeholder="My Default Value" />
RWolfe
la source
1
Le problème est que cela ne fonctionne pas du tout pour Internet Explorer. Si vous savez que vous n'allez pas avoir de clients IE, alors oui, c'est la meilleure réponse.
Sifu
2
Ce @Sifu est probablement une bonne chose à faire , même si vous ne savez que vous avez des clients IE (éventuellement en plus d'une solution JavaScript) car il sera également re-définir la valeur lorsque le champ est vidé.
ahruss
1
@Sifu quand IE n'a-t-il pas pris en charge l'attribut d'espace réservé, utilisé IE et accédé à www.1c3br3ak3r-multimedia.ca et regardé la barre de recherche, il utilise l'attribut d'espace réservé
RWolfe
1
@Jdoonan il n'y a pas si longtemps en fait - caniuse.com/#feat=input-placeholder placeholder est pris en charge dans IE10 et plus
danwellman
6

C'est simple; Un exemple est:

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

ou

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

ou

document.getElementById("fieldId").setAttribute('value','Value');
Arun Karnawat
la source
3
setAttribute ('value', 'Value'); ne définit pas la valeur visible dans la zone de texte pour moi sur Chrome.
Curtis
1 
<form>
  <input type="number"  id="inputid"  value="2000" />
</form>


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

Vous pouvez également remplacer la valeur par défaut par une nouvelle valeur

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

Cette partie que vous utilisez en html

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

C'est javaScript:

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

Vous pouvez également essayer:

document.getElementById('theID').value = 'new value';
Bogdan Mates
la source
3
La définition d'une nouvelle valeur ne définit pas la valeur par défaut. Par conséquent, cela ne résout pas le problème. Vous devriez dire cela comme commentaire du post une fois que vous avez acquis suffisamment de réputation.
Daniel Cheung