web-dev-qa-db-fra.com

javascript effacer la valeur du champ

Je fais un formulaire simple et j'ai ce code pour effacer la valeur initiale:

Javascript:

function clearField(input) {
    input.value = "";
};

html:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>

Mais ce que je ne veux pas, c’est que si l’utilisateur remplit l’entrée mais clique à nouveau dessus, il est effacé. Je veux que la valeur initiale "Nom" apparaisse dans le champ si l'entrée est vide. Merci d'avance!

javascriptjqueryhtml
21
user2580108

Voici une solution avec jQuery pour les navigateurs qui ne prennent pas en charge l'attribut d'espace réservé.

$('[placeholder]').focus(function() {
  var input = $(this);

  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);

  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

Trouvé ici: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

9
lekksi

fais comme

<input name="name" id="name" type="text" value="Name" 
   onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/>

et js

function fillField(input,val) {
      if(input.value == "")
         input.value=val;
};

function clearField(input,val) {
      if(input.value == val)
         input.value="";
};

mettre à jour

voici un demo fiddle du même

9
mithunsatheesh

C'est peut-être ce que vous voulez:

Travailler jsFiddle ici

  • Ce code place une chaîne de texte par défaut Enter your name here dans la zone de texte <input> et colorise le texte en gris clair. 

  • Dès que la case est cliquée, le texte par défaut est effacé et la couleur du texte est définie sur noir. 

  • Si le texte est effacé, la chaîne de texte par défaut est remplacée et la couleur gris clair est réinitialisée.

HTML:

<input id="fname" type="text" />

jQuery/javascript:

$(document).ready(function() {

    var curval;
    var fn = $('#fname');
    fn.val('Enter your name here').css({"color":"lightgrey"});

    fn.focus(function() {
        //Upon ENTERING the field
        curval = $(this).val();
        if (curval == 'Enter your name here' || curval == '') {
            $(this).val('');
            $(this).css({"color":"black"});
        }
    }); //END focus()

    fn.blur(function() {
        //Upon LEAVING the field
        curval = $(this).val();
        if (curval != 'Enter your name here' && curval != '') {
            $(this).css({"color":"black"});
        }else{
            fn.val('Enter your name here').css({"color":"lightgrey"});
        }
    }); //END blur()

}); //END document.ready
2
gibberish

HTML:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/>

JS:

function clearField(input) {
  if(input.value=="Name") { //Only clear if value is "Name"
    input.value = "";
  }
}
function fillField(input) {
    if(input.value=="") {
        input.value = "Name";
    }
}
1
Tomjr260
 var input= $(this);    
 input.innerHTML = '';
0
Ravinath Edirisinghe