Interdire les emoticon 😉 dans les champs Text

**vinze60** · 25/03/2019, 20h21

Bonjour à tous,

Je souhaiterais interdire le collage des emoticons dans un champs texte.

J'avoue, j'ai pensé à vérifier les balises, les caractères spéciaux, les doubles espaces, etc... mais jamais les emoticons jusqu'à ce qu'un utilisateur me fasse le coup

A vrai dire, je ne sais même pas comment ça se passe au niveau html. J'ai copié un emoticon sur google et je l'ai collé et ça a fonctionné... tout simplement... Alors comment dire à javascript (j'utilise jquery) de vérifier l'input et lui faire comprendre qu'un bonhomme jaune qui rigole est interdit ???

Help !

Merci

Vinze

**SpaceFrog** · 26/03/2019, 08h19

une émoticone à un code caractère ....

**vinze60** · 26/03/2019, 16h07

Merci...

Tu respectes en effet bien ta règle n°1 sur le succès...

**SpaceFrog** · 26/03/2019, 16h46

Le but n'est pas de faire le code à ta place, mais de te donner les voies de réflexion ...

trouve le charcode de ton emoticon et teste sa présence dans la chaine pour éventuellement le supprimer ...

**Watilin** · 28/03/2019, 20h09

… Jusqu’à ce que quelqu’un utilise un autre symbole non prévu, qu’il faudra ajouter à la liste noire, etc. Ça n’a pas de fin.
Il vaudrait mieux utiliser une liste blanche : n’autoriser qu’un ensemble de caractères, et rejeter tout le reste.

Pour info, les émojis ne sont ni du HTML ni du JavaScript, ce sont simplement des caractères. Ils n’ont pas de représentation imposée, ce sont les clients (navigateurs, applications, logiciels) qui choisissent quelle apparence ils doivent avoir. Un peu de la même façon qu’un « a » n’a pas la même apparence en Times New Roman ou en Comic Sans MS.

Ils ont en commun d’être représentés sur plus de 16 bits (plus de 2 octets). Par exemple, le caractère U+1F4A9 💩 (“pile of poo”) est représenté par les octets 01, F4, A9. Ils posent problème en JS car les chaînes sont encodées en interne en UTF-16 qui est un encodage à 16 bits. Du coup, les caractères qui « dépassent » sont traduits en une surrogate pair (paire de substitution), c’est-à-dire deux caractères qui n’ont pas de représentation quand ils sont pris séparément, mais qui, ensemble, représentent le caractère voulu.

Code :

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

1
2
3
4
5
6
7
>> const POO = "💩" // note : ce forum ne représente pas bien les émojis dans les blocs de code
 
>> POO.length
2
 
>> POO.match(/(.)(.)/)
Array(3) [ "💩", "\ud83d", "\udca9" ]// on voit les codes de la surrogate pair

Le fait que JS voie ça en réalité comme deux caractères est contre-intuitif, et ça peut causer des erreurs auxquelles on ne s’attendait pas.

**vinze60** · 30/03/2019, 08h37

Merci beaucoup Watilin pour cette réponse approfondie !

J'avais peur de cette liste blanche.

**psychadelic** · 30/03/2019, 14h38

pour la gestion de la saisie je te conseille d'utiliser les contraintes de validations, maintenant possibles en html5 => https://developer.mozilla.org/fr/doc...int_validation

**ProgElecT** · 04/04/2019, 10h45

Salut

Ma solution, car j'avais besoin de cette fonction pour un petit programme perso.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="fr"> <!-- LimiCaract.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Limitation de caratères</title>
		<style>
                        #cadre {
                                border: 2px solid white;
                                padding: 2px 2px 1px 2px_
                        }
                        #InText {width: 650px;height: 105px}
                </style>
	</head>
	<body>
		<div id="cadre">		
			<textarea id="InText" oninput="VerifEnter()">
				Je suis toujours dans les Essai 😨
						Aujourd'hui, détection de l'icône qui rit 😀 pour l'éliminer.
						🙏 Cela serait coule que çà fonctionne ! 1234
			</textarea>
		</div>
		<script>
                        //---------------------- du javascript complémentaire -----------------------------------
                        function VerifEnter(){
                                let cadre = document.getElementById("cadre");
                                let ValPx;
                                let Elem = document.getElementById("InText");
                                let soumistxt = Elem.value;
                                //pour supprimer tous caractères autres que ceux définis dans le RegExp
                                let patterntxt = new RegExp(/[^A-Za-z0-9_çñÄÂÀÁäâàáËÊÈÉéèëêÏÎÌÍïîìíÖÔÒÓöôòóÜÛÙÚüûùúµ<>@&?;,:"'!=%\(\)\+\-\/\*\.\s\\]*/,"gim");
                                let MsG = soumistxt.replace(patterntxt,"");
 
                                if (soumistxt!==MsG){
                                        (Elem.style.width !== "") ? ValPx = parseInt(Elem.style.width) : ValPx = 650;
                                        ValPx = (ValPx + 6)+'px';
                                        cadre.style.width = ValPx;
                                        cadre.style.borderColor = 'red';
                                        Elem.style.cursor = "not-allowed";
                                        //tempo pour laisser le temps de voir l'alerte (cadre rouge et curseur interdit)
                                        setTimeout(function(){Elem.value = MsG;cadre.style.borderColor = 'white';Elem.style.cursor = "text";},750);
                                }
                        }
                </script>
	</body>
</html>

**danielhagnoul** · 04/04/2019, 11h34

@ProgElecT

En production l'événement 'input' va générer du travail pour le navigateur et l'on risque d'avoir un comportement insatisfaisant (clignotement, sautillement) du textarea du point de vue de l'utilisateur.

Le code ci-dessous fait le travail, mais...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
const
    patterntxt = new RegExp(/[^A-Za-z0-9_çñÄÂÀÁäâàáËÊÈÉéèëêÏÎÌÍïîìíÖÔÒÓöôòóÜÛÙÚüûùúµ<>@&?;,:"'!=%\(\)\+\-\/\*\.\s\\]*/, "gim"),
    elemText = document.querySelector('#InText');
 
elemText.addEventListener('change', ev => {
    elemText.value =  elemText.value.replace(patterntxt, "");
}, {
    capture: false,
    passive: true,
    once: false
});

...l'événement 'change' implique que l'utilisateur agisse en dehors du textarea pour que le texte soit corrigé. Ce qui n'est pas idéal.

Solution proposée : surveiller l'événement 'mouseenter' du textarea et dans un setInterval générer un événement 'change' sur le textarea chaque X secondes. Le setInterval doit être stoppé dans l'événement 'mouseleave'.

**ProgElecT** · 04/04/2019, 14h46

Salut

Envoyé par danielhagnoul

En production l'événement 'input' va générer du travail pour le navigateur et l'on risque d'avoir un comportement insatisfaisant (clignotement, sautillement) du textarea du point de vue de l'utilisateur.

Je n'avais pas penser à ce problème, j'ai donc chargé le textarea avec 250 000 caractères, puis 500 000, là le fait est qu'il y à un petit retard entre la frappe du caractère au clavier et l'affichage de celui-ci, mais çà reste jouable.
Par contre à partir de 750 000 caractères, le temps de réactions devient prohibitif.

Mes premiers essais avec l'évènement change ne m'a pas semblé judicieux car, comme tu l'as signalé, la détection du dernier caractère entré ou coller n'est pas vérifié tant que l'on reste dans le textarea.

Je reste donc avec l'événement input dans mon programme qui ne comptera gère plus qu'un maximum de 5 000 caractères, mais plutôt un petit millier.

Je retiens tout de même tes observations, qui un jour me seront sûrement utiles.

Interdire les emoticon 😉 dans les champs Text

JavaScript

Discussions similaires

Partager

Partager