Définissez la valeur d'un champ de saisie


Réponses:


820

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

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

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

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>

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

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

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>

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

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>

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

ou

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

ou

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

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>

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>

0

Vous pouvez également essayer:

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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.