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

  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;
    }

  7. #7
    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


    Fonctionne nickel sous IE 6 et FF2 ...



    A+

  8. #8
    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
    tu veux dire que ça marche chez toi ????

  9. #9
    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
    Ben oui : testé à l'instant ...
    Tu dois avoir autre chose dans ta page qui entre en conflit

    A+

  10. #10
    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'ai rajouté une image sous mon textbox pour réaliser un cadre plus joli...

    Est-ce qu'il est possible que ça pose problème ?

  11. #11
    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
    C'est très étrange car quand j'actualise la page : rechercher disparait et je peux saisir du texte. Par contre si je reclique sur en dehors du champ ("Rechercher" apparait) puis reclique dans le champ ("Rechercher" disparait), la saisie et de nouveau impossibleb

  12. #12
    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
    J'ai rajouté une image sous mon textbox pour réaliser un cadre plus joli...

    Est-ce qu'il est possible que ça pose problème ?
    Citation Envoyé par polothentik Voir le message
    C'est très étrange car quand j'actualise la page : rechercher disparait et je peux saisir du texte. Par contre si je reclique sur en dehors du champ ("Rechercher" apparait) puis reclique dans le champ ("Rechercher" disparait), la saisie et de nouveau impossibleb
    On peut voir la page complète ?

    A+

  13. #13
    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 viens de faire le test... il doit bien y avoir un conflit quelque part car quand je prend le champ à part, il fonctionne parfaitement bien comme tu me l'avais fait remarquer !!

  14. #14
    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
    Le problème vient du contenu de ma page dont la feuille de style (CSS) est extrèmement pauvre mais qui passe dessous mon browser!

  15. #15
    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
    Le problème vient du contenu de ma page dont la feuille de style (CSS) est extrèmement pauvre mais qui passe dessous mon browser!


    Tu peux préciser / formuler autrement

    A+

  16. #16
    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
    A moins que
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #browser input.search_field {
    	width: 226px;
    	background-color: #FFFFFF;
    	font-family: Arial;
    	font-size: 13px;
    	color: #666666;
    	border: 0;
    	position: absolute;
            z-index : 999;
    	top: 17px;
    	left: 660px;
    }
    résolve le problème (mais tu risques de le rencontrer avec d'autres éléments) ...

    A+

  17. #17
    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
    Ok, avant toute chose, ce n'est pas que je ne veuille pas poster ma page, c'est juste que le nombre de fichier qui y sont liés (CSS) est assez énorme... donc galère !

    Les seules parties mobiles de ma page sont le contenu et le pied de page. Via l'utilisation de "z-index", mon contenu glisse sous mon entête et donc sous ma partie contenant le champ de recherche "Rechercher" (partie intitulée "browser"). Je pense que le problème vient du contenu puisque lorsque je le supprime, le champ textbox peut être saisi et les évènements sont bien pris en compte. D'autre part, mon pied de page, bien qu'ayant le même "z-index" que le contenu, bien que situé en dessous du contenu dans le fichier html, bien qu'étant positionné "absolute" avec "bottom", ne se situe pas sous le contenu :

    Pour faire court, ce contenu me pose beaucoup de problème !!!

  18. #18
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #browser input.search_field {
    	width: 226px;
    	background-color: #FFFFFF;
    	font-family: Arial;
    	font-size: 13px;
    	color: #666666;
    	border: 0;
    	position: absolute;
            z-index : 999;
    	top: 17px;
    	left: 660px;
    }
    J'avais déjà essayé cette solution mais elle ne marche pas !

  19. #19
    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
    Les seules parties mobiles de ma page sont le contenu et le pied de page. Via l'utilisation de "z-index", mon contenu glisse sous mon entête et donc sous ma partie contenant le champ de recherche "Rechercher" (partie intitulée "browser").
    Quel sont les z-index :
    de l'en-tête ?
    du contenu ?
    de l'input de recherche ?
    du pied de page ?
    Parce que ça :
    mon pied de page, bien qu'ayant le même "z-index" que le contenu,
    risque de générer un comportement aléatoire.
    Pour être au-dessus (à coup sûr), il faut une valeur z-index strictement supérieure ...

    A+

  20. #20
    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
    les z-index :

    - header : 1
    - navigation : 1
    - browser : 1
    - left_menu : 1
    - content : 0
    - footer : aucun

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

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