IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Insertion de caractères spéciaux


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 44
    Par défaut 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 : 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>

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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.

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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 += '▲'); return false">Ajouter le caractère ▲</span>
            <span class="btn" onmousedown="txtArea && (txtArea.value += '▼'); return false">Ajouter le caractère ▼</span>
        </p>
        <div>
            <p>Champs de saisie (cliquer dans un champ et ajoutez les caractères ▲ ou ▼)</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>
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 44
    Par défaut
    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

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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('▲'); return false">Ajouter le caractère ▲</span>
            <span class="btn" onmousedown="keepFocus('▼'); return false">Ajouter le caractère ▼</span>
        </p>
        <div>
            <p>Champs de saisie (cliquer dans un champ et ajoutez les caractères ▲ ou ▼)</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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 44
    Par défaut
    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 !

Discussions similaires

  1. Réponses: 7
    Dernier message: 24/05/2011, 17h45
  2. Réponses: 7
    Dernier message: 13/05/2009, 13h15
  3. Insert et caractères spéciaux
    Par eulstef dans le forum Langage SQL
    Réponses: 6
    Dernier message: 01/01/2008, 21h19
  4. Réponses: 4
    Dernier message: 09/10/2006, 16h19
  5. [SQL2]Insertion de caractères spéciaux
    Par willowII dans le forum Langage SQL
    Réponses: 4
    Dernier message: 26/10/2004, 15h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo