Insertion de caractères spéciaux
Bonjour,
Je cherche à permettre aux utilisateurs d'insérer quelques caractères spéciaux dans leurs champs de formulaires, mais je ne souhaite pas installer tout un éditeur de texte "riche".
J'ai trouvé quelque chose qui fonctionne (je mets l'exemple en fin de message)
et je crée un petit bouton du style
Code:
document.write("<span onclick='insertion(\"\330\",\"\");'>\330</span>");
(j'appelle une fonction JS pour afficher mon petit bouton. Mon exemple permet d'afficher le "O slash", pour symboliser un diamètre)
Cela fonctionne bien, mais le problème de la fonction JS que j'ai trouvée est qu'il faut indiquer "en dur" dans la fonction le champ dans lequel insérer le symbole, et le caractère ne s'insère donc pas dans le champ "dans lequel est l'utilisateur".
Pourriez-vous m'aider à implémenter cela ?
Bonne soirée, merci d'avance pour votre aide :)
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Insertion de contenu dans un champ de saisie à plusieurs lignes</title>
<script type="text/javascript">
<!--
function insertion(repdeb, repfin) {
var input = document.forms['formulaire'].elements['saisie'];
input.focus();
/* pour l'Explorer Internet */
if(typeof document.selection != 'undefined') {
/* Insertion du code de formatage */
var range = document.selection.createRange();
var insText = range.text;
range.text = repdeb + insText + repfin;
/* Ajustement de la position du curseur */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -repfin.length);
} else {
range.moveStart('character', repdeb.length + insText.length + repfin.length);
}
range.select();
}
/* pour navigateurs plus récents basés sur Gecko*/
else if(typeof input.selectionStart != 'undefined')
{
/* Insertion du code de formatage */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
/* Ajustement de la position du curseur */
var pos;
if (insText.length == 0) {
pos = start + repdeb.length;
} else {
pos = start + repdeb.length + insText.length + repfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* pour les autres navigateurs */
else
{
/* requête de la position d'insertion */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Insertion du code de formatage */
var insText = prompt("Veuillez entrer le texte à formater:");
input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
}
}
//-->
</script>
</head>
<body>
<h1>Démo: Insertion de contenu dans un champ de saisie à plusieurs lignes</h1>
<p>Positionnez simplement le curseur dans le champ de saisie ou marquez-y du texte.
Choisissez ensuite "Insérer" pour insérer <code>[link]...[/link]</code> à cet endroit, dans la mesure où votre navigateur le permet.</p>
<form name="formulaire" action="">
<p><textarea name="saisie" cols="30" rows="10">Votre message</textarea></p>
<p><input type="button" value="Insérer" onClick="insertion('[link]', '[/link]')"></p>
</form>
</body>
</html> |
