Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 10 sur 10
  1. #1
    Invité régulier
    Inscrit en
    juillet 2005
    Messages
    43
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 43
    Points : 5
    Points
    5

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

  2. #2
    Membre Expert
    Avatar de SylvainPV
    Profil pro Sylvain Pollet-Villard
    Inscrit en
    novembre 2012
    Messages
    1 336
    Détails du profil
    Informations personnelles :
    Nom : Sylvain Pollet-Villard

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 336
    Points : 2 429
    Points
    2 429

    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 109
    Points
    83 109

    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 :
    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>
    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
    Membre Expert
    Avatar de SylvainPV
    Profil pro Sylvain Pollet-Villard
    Inscrit en
    novembre 2012
    Messages
    1 336
    Détails du profil
    Informations personnelles :
    Nom : Sylvain Pollet-Villard

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 336
    Points : 2 429
    Points
    2 429

    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
    Invité régulier
    Inscrit en
    juillet 2005
    Messages
    43
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 43
    Points : 5
    Points
    5

    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 109
    Points
    83 109

    Par défaut

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

    Un exemple :
    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
    <!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.
    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 109
    Points
    83 109

    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
    Membre Expert
    Avatar de SylvainPV
    Profil pro Sylvain Pollet-Villard
    Inscrit en
    novembre 2012
    Messages
    1 336
    Détails du profil
    Informations personnelles :
    Nom : Sylvain Pollet-Villard

    Informations forums :
    Inscription : novembre 2012
    Messages : 1 336
    Points : 2 429
    Points
    2 429

    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
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 109
    Points
    83 109

    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
    Invité régulier
    Inscrit en
    juillet 2005
    Messages
    43
    Détails du profil
    Informations forums :
    Inscription : juillet 2005
    Messages : 43
    Points : 5
    Points
    5

    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 !

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •