web-dev-qa-db-fra.com

Comment effacer un champ de texte sur le focus du champ de texte

Je veux effacer le champ de texte lorsque l'utilisateur clique dessus

<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />

javascripthtmluser-controls
10
Gaurav Srivastava

Pour ce faire, vous devrez utiliser un langage de script, probablement javascript. Voici un exemple

<input type='text' value'Some text' onclick='javascript: this.value = ""' />

J'espère que cela t'aides.

Modifier:

Pour répondre à ce que David explique, voici un deuxième exemple au cas où vous le cherchiez.

<script type='javascript'>
    var clear = true;
    function clear(obj)
    {
        if(clear)
        {
            obj.value = '';
            clear = false;
        }
    }
</script>

<input type='text' value'Some text' onfocus='clear(this);' />
9
Ash Burlaczenko

À moins que vous ne fassiez quelque chose de spécifique pour lequel vous voulez uniquement effacer onclick, je suggérerais (comme d'autres l'ont noté) d'utiliser plutôt les actions onfocus. De cette façon, si quelqu'un utilise la navigation par tabulation, le texte par défaut sera également effacé.

Vous pouvez également utiliser onblur pour vérifier s'il est vide pour le ramener:

 <input type="text" value="Default text" name="yourName" onfocus="if(this.value == 'Default text') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Default text'; }">
19
ORyan

Utilisation de la bibliothèque jQuery:

<input id="clearme" value="Click me quick!" />

$('#clearme').focus(function() { 
  $(this).val(''); 
});
5
Jhourlad Estrella

Ou vous pouvez simplement utiliser l'attribut d'espace réservé . Par exemple<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>

2
Vishal Kumar

Vous pouvez utiliser <input ... onfocus="this.value='';"/>.

De cette façon, le champ sera effacé quand il aura le focus. Toutefois, si vous souhaitez uniquement l’effacer lorsque l’utilisateur clique dessus (c’est-à-dire pas lorsque le champ devient actif avec le clavier, par exemple), utilisez onclick au lieu de onfocus.

Toutefois, comme l'a souligné David Dorward dans un commentaire, ce comportement ne peut pas être attendu par l'utilisateur. Veillez donc à définir cette fonctionnalité sur des champs très spécifiques (tels que le champ de recherche).

2
Romain Linsolas

Voici comment je l'utilise pour un convertisseur/calculatrice de température: lorsque l'utilisateur tape (keyup), la zone de saisie de texte calcule à l'aide de la fonction attribuée. lorsque l'utilisateur sélectionne l'autre entrée de texte (il n'y a que deux entrées), l'entrée de texte sélectionnée sera effacée.

HTML: 

<p class="celcius"><h2 style="color:#FFF">Input:</h2>
    <input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>

  <hr>

  <h2 style="color:#FFF">Result:</h2>

<p class="Fahrenheit">
    <input name="Fahrenheit" type="text" class="feedback-input" id="Fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
  </p>

JavaScript: 

function Conversion() {
    var tempCels = parseFloat(document.getElementById('celsius').value);
      tempFarh =(tempCels)*(1.8)+(32);
      document.getElementById('Fahrenheit').value= tempFarh;
 }

function Conversion2() {
    var tempFarh = parseFloat(document.getElementById('Fahrenheit').value);
      tempCels =(tempFarh - 32)/(1.8);
      document.getElementById('celsius').value= tempCels;
 }
1
rockmandew
function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}

onfocus = "Clear (this)"
0
Philip Taylor

Ajoutez un script suivant à votre fichier js:

var input1 = document.getElementById("input1")

input1.onfocus = function() {
  if(input1.value == "Enter Postcode or Area") {
      input1.value = "";
  } 
};

input1.onblur = function() {
    if(input1.value == "") {
       input1.value = "Enter Postcode or Area";
   } 
 };
0
Matyas

essayez ça, ça a marché pour moi 

ajoutez ceci dans votre tag d'entrée

<code>
onfocus="this.value='';"</code>

par exemple si votre code est

<code>
<input type="text" value="Name" /></code>

l'utiliser comme ça

<code><input onfocus="this.value='';" type="text" value="Name" /></code>
0
user3152781