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

**vandman** · 18/07/2016, 18h14

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

**NoSmoking** · 18/07/2016, 19h53

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=''.

**vandman** · 18/07/2016, 20h16

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

**NoSmoking** · 18/07/2016, 20h40

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

**vandman** · 19/07/2016, 12h06

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.

**NoSmoking** · 19/07/2016, 20h34

...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 = '';
}

**danielhagnoul** · 20/07/2016, 23h23

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

**vandman** · 26/07/2016, 16h32

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

**NoSmoking** · 26/07/2016, 20h01

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.