Discussion :

[val69670]

Bonjour à tous,

Je possède une fonction qui fonctionne bien, et qui me permet d'afficher un texte en simultané lorsque l'on tape dans le champs de formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <input type="text" name="nom" id="Nom">
 
      $(document).ready(function(){
        $("#Nom").on("input", function(){
          $("#nom").text($(this).val());
        });
      });
 
<span id="nom"></span>

Toutefois, lorsque l'on arrive sur la page, la balise <Span> est vide et je souhaiterais indiquer une valeur par défaut.

Je coince sur ce point précis... Quelqu'un pourrait-il m'indiquer le chemin à prendre ?

Un grand merci...

[Beginner.]

Salut,

Ben il suffit de remplir l’élément <span> : <span id="nom">Valeur par défaut</span>...

[val69670]

Bonjour Beginner

Merci, oui j'avais testé et c'est un bon début.
Mais je voudrais aller un peu plus loin ; lorsque l'on remplit le champs et qu'on le vide ensuite, j'aimerais que cette valeur par défaut revienne.

[jreaux62]

Ou alors :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
$("#nom").text('valeur par défaut');
$("#Nom").on("input", function(){
   let txt = ($(this).val() != '')? $(this).val() : 'valeur par défaut';
   $("#nom").text( txt );
});
});

[val69670]

Un grand merci, c'est exactement ce que je cherchais à faire.

[NoSmoking]

Bonjour,
pourquoi ne pas utiliser l'attribut placeholder pour stocker la valeur par défaut ?

Remarque d'ordre général, il peut-être maladroit d'utiliser des noms d'ID proche, ici nom et Nom, même si la « casse » le permet, tôt ou tard tu rencontreras des soucis.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
  // récup. INPUT et texte par défaut
  const $input = $("#id-input-nom");
  const defaultText = $input.attr("placeholder");
  // récup. et initialisation du SPAN
  const $span = $("#id-span-nom").text(defaultText);
 
  // la fonction événement
  $input.on("input", function() {
    $span.text($input.val() || defaultText);
  });
});