Maison > interface Web > js tutoriel > JavaScript et jquery implémentent la définition et la suppression de la valeur par défaut de la zone de texte, effet des compétences code_javascript

JavaScript et jquery implémentent la définition et la suppression de la valeur par défaut de la zone de texte, effet des compétences code_javascript

WBOY
Libérer: 2016-05-16 16:20:32
original
1295 Les gens l'ont consulté

L'effet que vous souhaitez obtenir ici est de définir et de supprimer la valeur par défaut de la zone de texte. Lorsque la souris est placée dans la zone de texte comme indiqué ci-dessous, le texte gris disparaît.

1. Vous pouvez utiliser un moyen simple, qui consiste à ajouter l'attribut onfocus à la zone de texte de saisie, comme suit :

Copier le code Le code est le suivant :

onfocus='if(this.value=="Veuillez saisir des mots-clés à rechercher"){this.value="";}; onblur='if(this.value==""){this.value="Veuillez saisir des mots-clés à rechercher";};'>

En fait, l'attribut onfocus est très utile. Vous pouvez également modifier le style CSS via l'attribut onfocus, comme indiqué dans le code suivant :

onfocus='if(this.value=="Veuillez saisir des mots-clés à rechercher"){this.value="";}; this.className="input01"'
onblur='if(this.value==""){this.value="Veuillez saisir des mots-clés pour rechercher";}; this.className="input02"'>


2. Il peut également être implémenté en utilisant jquery :


Copier le code Le code est le suivant : $(document).ready(function() {
      var vdefault = $('#keyword').val();

$('#keyword').focus(function() {
//Lors de l'obtention du focus, si la valeur est la valeur par défaut, elle est définie sur vide Si ($(this).val() == vdefault) {

                  $(this).val("");
            }
        });
$('#keyword').blur(function() {
//Lorsque le focus est perdu, si la valeur est vide, elle est définie sur la valeur par défaut
Si ($(this).val()== "") {
                      $(this).val(vdefault);
            }
        });
});



Bien sûr, il existe de nombreuses façons de le mettre en œuvre, voici celles que j'ai utilisées...

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal