IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

événements : onfocus / onblur dans un textbox


Sujet :

JavaScript

Vue hybride

polothentik événements : onfocus / onblur... 01/04/2008, 13h23
E.Bzz Bonjour, il vient d'où le... 01/04/2008, 13h46
Jumano Bonjour, Tu peux faire comme... 01/04/2008, 14h18
polothentik J'avoue que le defaultValue... 01/04/2008, 16h08
E.Bzz C'est à dire ? Rien dans ton... 01/04/2008, 16h28
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    239
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 239
    Par défaut événements : onfocus / onblur dans un textbox
    Bonjour,

    J'ai un champ text dans lequel j'affiche par défaut la valeur "Rechercher".
    A ce champ sont associés 2 événements onfocus et onblur :

    - onfocus permettrais de d'effacer le contenu du champ pour permettre la saisie de l'utilisatuer

    - onblur permettrais de réinitialiser la valeur du champ text par défaut dans le cas où le champ est vide.

    La page étant chargée, un click dans le champ fait bien disparaitre le texte par défaut mais ne permet pas la saisie : le textbox ne semble pas actif !

    dans le fichier html :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="ActiveTextBox('search_field');" onblur="ResetTextBox('search_field');"/>
    dans le fichier js

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function ActiveTextBox(BoxId) {
    	txtBox = document.getElementById(BoxId);
    	if(txtBox.value == txtBox.defaultValue) {
    		txtBox.value = "";
    		}
    	}
     
    function ResetTextBox(BoxId) {
    	txtBox = document.getElementById(BoxId);
    	if(txtBox.value=="") {
    		return txtBox.value = txtBox.defaultValue;
    		}
    	//txtBox.style.color = "#333333";
    	//txtBox.value = "";
    	}
    Merci d'avance

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    il vient d'où le defaultValue ?



    A+

  3. #3
    Membre Expert
    Avatar de Jumano
    Profil pro
    Inscrit en
    Février 2007
    Messages
    1 163
    Détails du profil
    Informations personnelles :
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 1 163
    Par défaut
    Bonjour,
    Tu peux faire comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <script language="javascript" type="text/javascript">
    function ResetTextBox()
     {
    	if(document.form.search_field.value == "")
    	{	
    	document.form.search_field.value = "Rechercher" ;
    	}
     }
    </script>
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <form name="form" method="get" action="">
    <input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="this.value=''" onblur="ResetTextBox();"/>
    </form>

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    239
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 239
    Par défaut
    J'avoue que le defaultValue émane d'une inspiration personnel...
    Je ne veux pas avoir à utiliser une valeur en particulier (comme tu le propose Jumano) afin de pouvoir utiliser ces 2 fonctions pour divers textbox qui contiendraient des valeurs initiales différentes.

    Comme je suis en pleine débacle avec de l'AJAX (javascript/ASP) et que je me tors les neurones dans tous les sens, je viens de me rendre compte (vous n'y voyez peut être aucun rapport mais faites moi confiance!) que ce defaultValue peut être remplacé par un argument de plus dans mes 2 fonctions contenant le texte initial (soit mon fameux defaultValue)... pour répondre à ta très juste question E.Bzz Du coup, il devient utilisable pour tous mes textbox !

    Ainsi :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="text" name="search_field" id="search_field" value="Rechercher" class="search_field" onfocus="ActiveTextBox('search_field','Rechercher');" onblur="ResetTextBox('search_field','Rechercher');"/>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function ActiveTextBox(BoxId,txtIdent) {
    	txtBox = document.getElementById(BoxId);
    	if(txtBox.value == txtIdent) {
    		txtBox.value = "";
    		}
    	}
     
    function ResetTextBox(BoxId,txtIdent) {
    	txtBox = document.getElementById(BoxId);
    	if(txtBox.value=="") {
    		return txtBox.value = txtIdent;
    		}
    	}
    Mais ça ne résoud pas mon problème de textbox inactif quand "onfocus" et dans lequel on ne peut donc rien rentrer...

    AJAX = Gros Bobos

  5. #5
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par polothentik Voir le message
    textbox inactif quand "onfocus" et dans lequel on ne peut donc rien rentrer...
    C'est à dire ?
    Rien dans ton code ne rend ce champ inactif ...

    Que contient la class ?

    A+

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    239
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 239
    Par défaut
    Je charge la page : - "Rechercher" est visible dans le textbox

    Je clique sur le textbox : - "Rechercher" disparait / Aucune saisie n'est possible

    Je clique en dehors du textbox: -"Rechercher" est de nouveau visible


    La classe css est la suivante:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #browser input.search_field {
    	width: 226px;
    	background-color: #FFFFFF;
    	font-family: Arial;
    	font-size: 13px;
    	color: #666666;
    	border: 0;
    	position: absolute;
    	top: 17px;
    	left: 660px;
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 26/04/2014, 01h43
  2. Réponses: 6
    Dernier message: 02/12/2010, 16h54
  3. pb onfocus onblur dans un <div>
    Par pit9.76 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 30/06/2006, 17h51
  4. l'évènement "keypress" dans une textbox
    Par dams580 dans le forum Delphi .NET
    Réponses: 1
    Dernier message: 15/05/2006, 14h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo