-
Notifications
You must be signed in to change notification settings - Fork 0
/
CaseStudy.Clipboard.htm
107 lines (104 loc) · 3.54 KB
/
CaseStudy.Clipboard.htm
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE HTML>
<html>
<head>
<title>Le copier/coller</title>
</head>
<body spellcheck="false">
<a href="./index.htm">index</a>
<div><h1> Le copier/coller</h1>
<p>
Les navigateurs ne nous laisse pas la possibilité d'accéder et de
modifier les valeurs du presse papier pour des raisons de sécurité. <br>
Si l'on veut utiliser le copier/coller natif, il va falloir faire preuve d'une grande créativité.
</p>
<div><h2> Le presse papier simple</h2>
<p>
Le 'couper' ou le 'copier' copie le contenu de la sélection dans une variable.<br>
Le 'coller' utilise le contenu de cette variable.
</p>
<p><cite>
Ce presse papier est utilisable que dans l'éditeur... <br>
Il ne nous permet pas d'importer du texte d'ailleurs.
</cite></p>
</div>
<div><h2> Le presse papier natif</h2>
<p>Il nous faut au moins un élément TEXTAREA ou INPUT(type=TEXT) pour pouvoir capturer ses actions.</p>
<p>J'ai choisi d'utiliser 2 TEXTAREA :</p>
<dl><ol>
<li>Un pour capturer le contenu de la sélection de l'éditeur.
<dl>
<dd>Cet élément est mise à jour dés que la sélection est modifiée.</dd>
<dd>Son contenu est sélectionné (voir La sélection native).</dd>
<dd>Il a le focus tant qu'une sélection existe.</dd>
<dd>Il sert à capturer un Couper ou un Coller.</dd>
</dl></li>
<li>Un pour insérer du contenu dans l'éditeur.
<dl>
<dd>Il a le focus tant quand l'éditeur a le focus et qu'aucune sélection existe.</dd>
<dd>Il permet de capturer un Coller.</dd>
<dd>Il permet aussi capturer les touches pressées du clavier.</dd>
<dd>Son contenu est automatiquement traité : il est toujours vide.</dd>
</dl></li>
</ol></dl>
<p>La seule contrainte est de différer les actions de l'éditeur.</p>
<dl>
<dt><kbd>CTRL+C</kbd>: Copie de la sélection.
<ul>
<li>Le contenu du TEXTAREA 1 est copié !</li>
<li>Il est aussi copié dans le presse papier simple.</li>
</ul></dt>
<dd>
<dl>
<dt>Actions différées :
<ol>
<li>Le TEXTAREA 2 prend le focus !</li>
</ol>
</dt>
</dl>
</dd>
<dt><kbd>CTRL+X</kbd>: Couper.
<ul>
<li>Le contenu du TEXTAREA 1 est copié !</li>
<li>Il est aussi copié dans le presse papier simple.</li>
</ul></dt>
<dd>
<dl>
<dt>Actions différées (si une sélection existe) :
<ol>
<li>Placer le curseur au début de la sélection.</li>
<li>Remplacer la sélection par une chaîne vide.</li>
<li>Le TEXTAREA 2 prend le focus !</li>
</ol>
</dt>
</dl>
</dd>
<dt><kbd>CTRL+V</kbd>: Coller. Le contenu d'un des deux TEXTAREA est modifié !</dt>
<dd>
<dl>
<dt>Actions différées
<ol>
<li>Récupération du contenu du TEXTAREA possédant le focus.</li>
<li>Si il est vide, récupération du contenu du presse papier simple.</li>
<li>La valeur de ce TEXTAREA est remplacé par une chaîne vide.</li>
<li>La sélection courante est supprimée.</li>
<li>Le contenu récupéré est inséré au curseur.</li>
</ol>
</dt>
</dl>
</dd>
</dl>
</div>
<div><h2> Conclusion</h2>
<p>Il est possible :</p>
<ul>
<li>D'utiliser le presse papier natif.</li>
<li>De simuler les actions du presse papier natif dans l'éditeur.</li>
</ul>
<p>Pour plus d'information <a href="Module.KeyBoard.htm">passons à la pratique</a>.<p>
</div>
</div>
<link rel="stylesheet" type="text/css" href="src/toc.css">
<script src="src/toc.js"></script>
<script> setTOC( "CaseStudy.Clipboard.htm" ) </script>
</body>
</html>