Insertion de caractères spéciaux

Douzout · 13/12/2012, 18h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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

SylvainPV · 13/12/2012, 18h53

Bonjour,

La partie délicate, c'est que si l'utilisateur doit cliquer sur un bouton pour saisir un caractère spécial, alors il perd le focus du champ qu'il était en train de modifier. Donc difficile de savoir le champ dans lequel il est

Tu peux enregistrer en Javascript le dernier champ focus par l'utilisateur , mais c'est un peu du bricolage.

Bovino · 13/12/2012, 21h56

Sylvain, il existe une astuce pour gérer le focus, c'est utiliser l'événement onmousedown avec un return false :

Code html :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mousedown</title>
    <script>var txtArea = false</script>
    <style>
        .btn{
            cursor: pointer;
            background-color: silver;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>
        <span class="btn" onmousedown="txtArea && (txtArea.value += '&#9650;'); return false">Ajouter le caractère &#9650;</span>
        <span class="btn" onmousedown="txtArea && (txtArea.value += '&#9660;'); return false">Ajouter le caractère &#9660;</span>
    </p>
    <div>
        <p>Champs de saisie (cliquer dans un champ et ajoutez les caractères &#9650; ou &#9660;)</p>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
    </div>
</body>
</html>

SylvainPV · 13/12/2012, 23h07

Ah pas bête

Tu sais si ça marche aussi avec le tactile ? Pour la navigation au clavier c'est sûr que non mais bon c'est un peu moins grave.

Douzout · 20/12/2012, 17h10

Merci Bovino, c'est plutôt pas mal en effet !
Je suis en train de voir si je peux régler les 2 micro-problème :
- insérer le caractère à l'endroit où on a laissé le curseur dans le champ
- récupérer le focus sur le champ après l'insertion
Mais merci beaucoup en tout cas

Bovino · 20/12/2012, 17h43

C'est un peu plus compliqué car il faut gérer l'objet Range.

Un exemple :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>mousedown</title>
    <style>
        .btn{
            cursor: pointer;
            background-color: silver;
            border: 1px solid black;
        }
    </style>
	<script>
		var txtArea = false;
		function keepFocus(addValue){
			if(txtArea){
				var posDeb = txtArea.selectionStart,
					posFin = txtArea.selectionEnd,
					valeur = txtArea.value;
				txtArea.value = valeur.substring(0, posDeb) + addValue + valeur.substring(posFin);
				txtArea.setSelectionRange(posDeb + addValue.length, posDeb + addValue.length);
			}
		}
	</script>
</head>
<body>
    <p>
        <span class="btn" onmousedown="keepFocus('&#9650;'); return false">Ajouter le caractère &#9650;</span>
        <span class="btn" onmousedown="keepFocus('&#9660;'); return false">Ajouter le caractère &#9660;</span>
    </p>
    <div>
        <p>Champs de saisie (cliquer dans un champ et ajoutez les caractères &#9650; ou &#9660;)</p>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
        <textarea onfocus="txtArea = this" onblur="txtArea = false"></textarea>
    </div>
</body>
</html>

Mais attention, c'est à adapter pour IE<9.

Bovino · 20/12/2012, 21h38

Citation:

Envoyé par SylvainPV

Ah pas bête

Tu sais si ça marche aussi avec le tactile ?

Euh... non... je suis un vieux moi, j'ai pas de tablette ni de iPigeon...

Citation:

Envoyé par SylvainPV

Pour la navigation au clavier c'est sûr que non mais bon c'est un peu moins grave.

Ben si, ça fonctionne très bien avec la navigation au clavier

SylvainPV · 20/12/2012, 22h24

Moi non plus je n'ai pas de iPigeon, mais il va falloir t'y faire, on produit plus d'écrans tactiles que de claviers aujourd'hui

Smartphones, tablettes, PC All in One tactiles, et bientôt les TV connectées (les télécommandes à pointeur simulent des évènements tactiles pour exploiter les applis et sites destinés aux tablettes. en attendant une API Javascript pour la gyroscopie ^^).

Pour la navigation au clavier (comprendre alt+tab et enter), je ne vois pas comment ça pourrait fonctionner avec onmousedown ^^ Mais c'est moins grave dans la mesure où les "keyboarders" se sont rassemblés en un obscur groupuscule surfant sur le net avec Lynx

Bovino · 20/12/2012, 22h53

Citation:

je ne vois pas comment ça pourrait fonctionner avec onmousedown ^^

Ah ouais... pas bête !

Pourtant, j'étais persuadé d'avoir testé mais c'était juste pour le changement de focus sur les textarea !

Ceci dit, il doit y avoir un moyen avec onactivate et DOMactivate...

Douzout · 06/02/2013, 18h03

Bonjour,

Je m'apprêtais à passer cette discussion en "Résolu", mais je constate le comportement suivant sous IE8 : lorsque j'insère le caractère spécial dans un textarea contenant des retours à la ligne, ceux-ci sont supprimés.

Avez-vous une idée pour corriger cela ?
J'avais plus ou moins laissé tomber mes deux autres comportements "nice-to-have ("insérer le caractère à l'endroit où on a laissé le curseur dans le champ" et "récupérer le focus sur le champ après l'insertion"), mais celui-ci sera plus dur à faire passer auprès des utilisateurs

Merci pour votre aide !

13/12/2012, 18h53	#2
SylvainPV Membre chevronné Inscription : novembre 2012 Messages : 513 Détails du profil Informations forums : Inscription : novembre 2012 Messages : 513 Points : 710 Points : 710	Bonjour, La partie délicate, c'est que si l'utilisateur doit cliquer sur un bouton pour saisir un caractère spécial, alors il perd le focus du champ qu'il était en train de modifier. Donc difficile de savoir le champ dans lequel il est Tu peux enregistrer en Javascript le dernier champ focus par l'utilisateur , mais c'est un peu du bricolage.
	00

13/12/2012, 23h07	#4
SylvainPV Membre chevronné Inscription : novembre 2012 Messages : 513 Détails du profil Informations forums : Inscription : novembre 2012 Messages : 513 Points : 710 Points : 710	Ah pas bête Tu sais si ça marche aussi avec le tactile ? Pour la navigation au clavier c'est sûr que non mais bon c'est un peu moins grave.
	00

20/12/2012, 17h10	#5
Douzout Invité régulier Inscription : juillet 2005 Messages : 39 Détails du profil Informations forums : Inscription : juillet 2005 Messages : 39 Points : 5 Points : 5	Merci Bovino, c'est plutôt pas mal en effet ! Je suis en train de voir si je peux régler les 2 micro-problème : - insérer le caractère à l'endroit où on a laissé le curseur dans le champ - récupérer le focus sur le champ après l'insertion Mais merci beaucoup en tout cas
	00

20/12/2012, 22h24	#8
SylvainPV Membre chevronné Inscription : novembre 2012 Messages : 513 Détails du profil Informations forums : Inscription : novembre 2012 Messages : 513 Points : 710 Points : 710	Moi non plus je n'ai pas de iPigeon, mais il va falloir t'y faire, on produit plus d'écrans tactiles que de claviers aujourd'hui Smartphones, tablettes, PC All in One tactiles, et bientôt les TV connectées (les télécommandes à pointeur simulent des évènements tactiles pour exploiter les applis et sites destinés aux tablettes. en attendant une API Javascript pour la gyroscopie ^^). Pour la navigation au clavier (comprendre alt+tab et enter), je ne vois pas comment ça pourrait fonctionner avec onmousedown ^^ Mais c'est moins grave dans la mesure où les "keyboarders" se sont rassemblés en un obscur groupuscule surfant sur le net avec Lynx
	00

06/02/2013, 18h03	#10
Douzout Invité régulier Inscription : juillet 2005 Messages : 39 Détails du profil Informations forums : Inscription : juillet 2005 Messages : 39 Points : 5 Points : 5	Bonjour, Je m'apprêtais à passer cette discussion en "Résolu", mais je constate le comportement suivant sous IE8 : lorsque j'insère le caractère spécial dans un textarea contenant des retours à la ligne, ceux-ci sont supprimés. Avez-vous une idée pour corriger cela ? J'avais plus ou moins laissé tomber mes deux autres comportements "nice-to-have ("insérer le caractère à l'endroit où on a laissé le curseur dans le champ" et "récupérer le focus sur le champ après l'insertion"), mais celui-ci sera plus dur à faire passer auprès des utilisateurs Merci pour votre aide !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email