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

Version imprimable

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:

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

18/07/2016, 19h53
NoSmoking

Bonjour,

Citation:

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

Citation:

...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=''.
18/07/2016, 20h16
vandman

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:

document.getElementById("demo").value="";

après

Code:

document.getElementById("demo").innerHTML = "You pasted text!";

Ca ne fonctionne pas?

Comment faire?

Cordialement,
Vandman
18/07/2016, 20h40
NoSmoking

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

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:

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.

19/07/2016, 20h34
NoSmoking
Citation:

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

1 2 3 4 5 6 7 8 9 if (!AlertMessage) { //traitement } else { alert(AlertMessage); document.getElementById('code').value = ''; }
20/07/2016, 10h57
vandman

2 pièce(s) jointe(s)

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).
Pièce jointe 215856

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

Pièce jointe 215857

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
20/07/2016, 12h38
danielhagnoul

Citation:

Envoyé par vandman

[...] 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.
20/07/2016, 14h20
vandman

Bonjour,

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

Cordialement,
Vandman

Je vous conseille d'écouter l'événement 'input'.

Exemple :

Code:

<input id="paste" type="text" size="40">
Code:

1 2 3 document.querySelector( '#paste' ).addEventListener( 'input', function( ev ){ console.log( "input event : ", this.value ); }, false );

26/07/2016, 16h32
vandman

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:

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:

content = PastedData.split(/[\t\r\n]/g);

Ce même code ne fonctionne plus si j'utilise la nouvelle méthode:

Code:

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

Citation:

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:

<input id="code" name="code" onpaste="PasteCode(event)" type="text">

et ton « astuce »

Code:

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

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.

29/07/2016, 15h45
vandman

Bonjour,

Merci NoSmoking pour la réponse. ca fonctionne :).

Cordialement,
Vandman