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 :

Coller puis vider le champ une fois l'erreur affichée


Sujet :

JavaScript

  1. #1
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut Coller puis vider le champ une fois l'erreur affichée
    Bonjour,

    Dans le code suivant, le texte collé apparaît visuellement dans le champ un fois le message d'alerte affiché.
    Comment faire pour le faire disparaître, ou annuler le coller, de sorte qu'une fois le traitement fini (message d'alerte affiché), le champ soit vide?

    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
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    <body>
     
    <p>This example demonstrates how to assign an "onpaste" event to an input element.</p>
     
    <input type="text" onpaste="TestErreur(input1)" value="" size="40">
     
    <script>
    function TestErreur(input1) {
        if (input1 = "")
        {
            alert("Le champ 1 est vide");
        }
        else
        {
            traitement
        }
    }
    </script>
     
    </body>
    </html>
    Cordialement,
    Vandman

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    if (input1 = "")
    là déjà tu démarres mal, tu affectes "" (chaîne vide) à la variable passée en paramètre (input1).

    = pour affectation
    == pour test égalité
    === pour test égalité stricte



    ...de sorte qu'une fois le traitement fini (message d'alerte affiché), le champ soit vide?
    Pour un champ, <input>, <textarea>, par exemple, il suffit de modifier leur value, oElem.value=''.

  3. #3
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,

    J'ai fait tres vite dans l'écriture du code.
    Si tu essaye avec le test proposé sur le site w3schools, en ajoutant la ligne suivante,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("demo").value="";
    après
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById("demo").innerHTML = "You pasted text!";
    Ca ne fonctionne pas?

    Comment faire?


    Cordialement,
    Vandman

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Il s'agit des bases que tu n'appliques pas.
    Un élément <p> n'a pas de value mais on peut le modifier via son innerHTML, regarde bien et compare tes 2 lignes..

  5. #5
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,

    j'ai condensé le code pour faire au plus simple.

    En partant de ce code, je colle les trois données suivantes et en cas d'erreur, le champ code doit rester vide.
    Comment faire cela (le en cas d"erreur, le champ code doit rester vide)?
    0123
    0145
    o164

    voici le code:
    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <html>
    	<head>
    		<meta http-equiv="refresh" content="url=developpez.php">
    	    <meta charset="utf-8">
    		<title>injection des codes</title>
    	</head>
    	<body>
    		<div id="FormulaireCode">
    		<form action="action.php" method="GET">
    		<table id="TableauCodeLibelle">
    			<thead id="TheadCodeLibelle">
    				<tr>
    					<th class="col1">code</th>
    				</tr>
    			<tbody id="TbodyCodeLibelle">
    				<tr>
    					<td class="col1"><input id="code" name="code" onpaste="PasteCode(event)" type="text"></td>
    				</tr>
    		</table>
    		 <button name="Valider" type="submit">OK</p>
    		</form>
    		</div>
    	</body>
    <script>
    function PasteCode(event)
    {
    	if (window.clipboardData && window.clipboardData.getData) // IE
            PastedData = window.clipboardData.getData('Text');
        else if (event.clipboardData && event.clipboardData.getData)
            PastedData = event.clipboardData.getData('text/plain');
     
    	// éclate les données dans un tableau, ici "content". Il s'agit d'une liste de données à une dimention.
        var content = PastedData.split(/[\t\r\n]/g);
        var NbrOfContent = content.length - 1;
        var NbrChampCode;
        var AlertMessage = "";
        for (NumChamp = 0; NumChamp <= NbrOfContent; NumChamp++)
    		{
    			// test:1 si le champ commence avec le format nnnn => dans ce cas, c'est un code
    			if ( content[NumChamp].search(/^[0-9]{4}/) > -1)
    			{
    				NbrChampCode++;
    			}
    			else
    			{
    				AlertMessage = "erreur: Les codes ou certain des codes que vous voulez injecté n'ont pas le bon format";
    			}
    		}
     
    	if (!AlertMessage)
    	{
    		//traitement
    	}
    	else
    	{
    		alert (AlertMessage);
    	}
    }
    </script>
    </html>
    Cordialement,
    vandman

    PS: j'espere cette fois-ci ne pas avoir été trop rapide pour la question.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    ...le champ code doit rester vide.
    Ton champ code est donc un <input> et tu peux donc l'effacer via sa value="".

    Si j'ai bien compris dans ta fonction cela donne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if (!AlertMessage)
    {
        //traitement
    } 
    else
    {
        alert(AlertMessage);
        document.getElementById('code').value = '';
    }

  7. #7
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,

    La solution proposé ne fonctionne pas.
    On peux voir que la donnée n'est pas présente dans le champ au moment de l'affichage du message d'erreur (cf copie d'écran ci-dessous).

    Nom : copier_coller 01.png
Affichages : 115
Taille : 58,4 Ko

    Il n'y a donc rien a vider.
    Par contre une fois qu'on valide le message, la donné apparaît sans pour autant modifier le code (cf copie d'écran ci-dessous).


    Nom : coppier_coller 02.png
Affichages : 123
Taille : 43,8 Ko

    Ceci me laisse penser que dans mon cas, la donnée arrive dans l'input après le traitement onpaste. C'est étrange car quand on traite la donnée, ce phénomène n’apparaît pas???
    Cordialement,
    vandman

  8. #8
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par vandman Voir le message
    [...] la donnée n'est pas présente dans le champ au moment de l'affichage [...]
    C'est à cause de l'événement écouté : <input id="code" name="code" onpaste="PasteCode(event)" type="text">.
    Lorsque le JS est exécuté, la valeur (value) de l'input est toujours vide.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  9. #9
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,

    Ok. Mais je dois faire comment dans le principe pour réaliser ce que je veux?

    Cordialement,
    Vandman

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Je vous conseille d'écouter l'événement 'input'.

    Exemple :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input id="paste" type="text" size="40">

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.querySelector( '#paste' ).addEventListener( 'input', function( ev ){
      console.log( "input event : ", this.value );
    }, false );

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,
    L'écoute de l'évènement Input ne change rien.

    Je vois bien mes données s'afficher dans la console.

    Par contre, j'ai trouvé cette astuce:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    input.setAttribute("onpaste", "var e=this; setTimeout(function(){ PasteCode(e.value) }, 200);");
    La donnée est bien intégré avant le début du traitement, ce qui fait que je peux vider le champ.
    Mais ca me cause un autre probleme:
    Le code ci dessus me permettait dans la méthode initiale d'éclater les données dans un tableau (array).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content = PastedData.split(/[\t\r\n]/g);
    Ce même code ne fonctionne plus si j'utilise la nouvelle méthode:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    input.setAttribute("onpaste", "var e=this; setTimeout(function(){ PasteCode(e.value) }, 200);");
    Résultat de la méthode initial:
    [champ0] = code, [champ1] = libelle, [champ2] = code, [champ3] = libelle, [champ4] = code, [champ5] = libelle, ...

    Résultat avec l'astuce (input.setAttribute("onpaste", "var e=this; setTimeout(function(){ PasteCode(e.value) }, 200);"); ):
    [champ0] = code, [champ1] = libelle code, [champ2] = libelle code, [champ5] = libelle code, ...

    Pourquoi cette différence de traitement entre la méthode initiale et la méthode avec l'astuce

    Cordialement,
    Vandman

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    La donnée est bien intégré avant le début du traitement, ce qui fait que je peux vider le champ.
    normal puisque ton script plante, l'action par défaut se réalise.

    Si l'on considère les deux codes suivants :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input id="code" name="code" onpaste="PasteCode(event)" type="text">
    et ton « astuce »
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input id="code" name="code" onpaste="var e=this; setTimeout(function(){ PasteCode(e.value) }, 200);" type="text">
    regarde ce qui se passe au niveau du paramètre que tu passes à la fonction, avec ton astuce tu passes une String alors que la fonction attend un ClipboardEvent d'où pas de clipboardData.getData ...d'où ça plante mais l'idée du setTimeout est bonne

    Sur le chemin de setTimeout :
    il faut laisser le temps au moteur de rendu pour afficher le texte copier, donc lancer tes vérifications après d'où l'utilisation du setTimeout mais dans la fonction une fois le paramètre ClipboardEvent récupérè.

    En reprenant ton code
    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    function PasteCode(event) {
        if (window.clipboardData && window.clipboardData.getData) // IE
            PastedData = window.clipboardData.getData('Text');
        else if (event.clipboardData && event.clipboardData.getData)
            PastedData = event.clipboardData.getData('text/plain');
        // pour laisser le temps de l'affichage
        setTimeout(function() {
            // éclate les données dans un tableau, ici "content". Il s'agit d'une liste de données à une dimention.
            var content = PastedData.split(/[\t\r\n]/g);
            var NbrOfContent = content.length - 1;
            var NbrChampCode;
            var AlertMessage = '';
            for (NumChamp = 0; NumChamp <= NbrOfContent; NumChamp++) {
                // test:1 si le champ commence avec le format nnnn => dans ce cas, c'est un code
                if (content[NumChamp].search(/^[0-9]{4}/) > -1) {
                    NbrChampCode++;
                } else {
                    AlertMessage = 'erreur: Les codes ou certain des codes que vous voulez injecté n\'ont pas le bon format';
                }
            }
            if (!AlertMessage) {
                //traitement
            } else {
                alert(AlertMessage);
                document.querySelector('#code').value = '';
            }
        }, 500);
    }
    Entre nous de ne pas afficher un code qui ne fonctionne ne répond pas aux critères ne m'apparait pas comme un handicap.

  13. #13
    Membre actif

    Homme Profil pro
    Consultant informatique
    Inscrit en
    Septembre 2011
    Messages
    370
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : Industrie

    Informations forums :
    Inscription : Septembre 2011
    Messages : 370
    Points : 251
    Points
    251
    Par défaut
    Bonjour,

    Merci NoSmoking pour la réponse. ca fonctionne .

    Cordialement,
    Vandman

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

Discussions similaires

  1. Verrouillage de champ une fois modifié et enregistré
    Par Marisa82 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 20/02/2013, 08h11
  2. [WD14] Destruction d'un champ une fois programme compilé
    Par philippe30 dans le forum WinDev
    Réponses: 2
    Dernier message: 24/11/2011, 20h45
  3. [AC-2007] bloquer un champ une fois calculé
    Par stagiaire88 dans le forum VBA Access
    Réponses: 4
    Dernier message: 15/06/2011, 15h27
  4. Réponses: 4
    Dernier message: 18/08/2008, 16h11
  5. Réponses: 4
    Dernier message: 01/02/2008, 22h12

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