Simuler l'appui sur la touche entrée

**Erwan3110** · 30/05/2019, 16h07

Bonjour,

J'essaye de faire une fonction qui écrit du texte dans un textarea, mais je n'arrive pas à envoyer le texte en appuyant sur "entrer"

J'ai essayer de simuler la touche 13 du clavier sur mon textarea, mais sa ne fonctionne pas comme je fais.

Code :

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

1
2
3
4
5
6
7
8
9
<script>
var b = jQuery.Event("toucher");
b.keypress = 13;
$(document).on("toucher", function(event){
    var nomTouche = event.keypress;
    console.log('Évenement keypress : ' + nomTouche);
});
$("#ID_textarea").trigger(b);
</script>

Code :

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

$('#test').trigger($.Event( "keypress", { which: 13 , keyCode: 13, key: 13 } ));

Les deux différents codes si-dessus ne font rien ...

Si une personne à déjà simuler une entrée clavier en js, je veux bien une explication

Merci

**NoSmoking** · 01/06/2019, 10h29

Bonjour,
pas sûr d'avoir bien compris ce que tu cherches à faire

Code :

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

1
2
3
4
5
$("textarea").on("keypress", function(e) {
    if (e.keyCode === 13) {
        console.log("Touche entrée appuyée"); // action
    }
});

**Erwan3110** · 02/06/2019, 11h57

Non, ton code détecte si on a appuyer sur entrée, moi je voudrais simuler la touche entrée.

Pour simuler j'ai essayer de créer un Event, et ensuite de l'appliquer sur le textarea, mais il ne se passe rien

**ProgElecT** · 02/06/2019, 12h37

Salut

Peut être avec String.fromCharCode(13).

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
<!DOCTYPE html>
<html lang="fr"> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
		<style>
                        /* TAGs comentaire dans la partie style */
                </style>
		<script>
                        'use strict'; // force la déclaration des variables
                        function model() {
                        }//----------------------fin de la function model -----------------------------------
                </script>
	</head>
	<body>
		<!-- la partie affichée sur la page -->
		<textarea id="txtRep" style="width:50%;height:100px;">A que coucou</textarea>
		<button onclick="AjouterEnter()">Go</button>
		<script>
                        function AjouterEnter() {
                                let Elem = document.getElementById("txtRep");
                                Elem.value =  Elem.value + '    ......  pour un retour à la ligne ->' + String.fromCharCode(13) + 'Voilà qui est fait' ;
                        }
                </script>
	</body>
</html>

**Sodium** · 02/06/2019, 13h52

Que veux-tu faire exactement ? Ne serait-il pas plus simple de déclencher directement l'événement résultant de cet appui sur enter ?

Si le but est d'envoyer le formulaire tu peux par exemple faire $('form').submit()

**ThomasR** · 02/06/2019, 15h27

Bonjour,

Attention $('form').submit([handler]) sert à attacher un handler à l'événément submit. Je pense que vous vouliez dire

Code :

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

$('form').trigger('submit');

**Sodium** · 02/06/2019, 15h52

Comme souvent en jQuery, une fonction avec un paramètre sert à attacher un événement tandis que la même fonction sans paramètre sert à déclencher l'événement

**ThomasR** · 02/06/2019, 17h28

Ha oui tu as raison @Sodium, j'utilise jamais les shorthands d'où mon erreur

**NoSmoking** · 02/06/2019, 17h37

Envoyé par Erwan3110

... moi je voudrais simuler la touche entrée.

J'ai répondu un peu vite par manque d'habitude dans la simulation

Il faut utiliser les paramètres autorisés par la méthode trigger().

Code :

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

1
2
3
4
$("textarea").trigger("keypress", {
  "enter": true,
  "keyCode": 13
});

et gérer cet argument supplémentaire lors de la gestion de l'événement

Code :

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

1
2
3
4
5
$("textarea").on("keypress", function(e, param) {
  if (param && param.keyCode === 13) {
    console.log("Simulation touche entrée appuyée"); // action
  }
});

**Erwan3110** · 04/06/2019, 21h27

Envoyé par NoSmoking

J'ai répondu un peu vite par manque d'habitude dans la simulation

Il faut utiliser les paramètres autorisés par la méthode trigger().

Code :

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

1
2
3
4
$("textarea").trigger("keypress", {
  "enter": true,
  "keyCode": 13
});

Oui, effectivement je veux simuler la touche 13. Mais quand j’exécute de code (en changent le "textarea" par #test, l'id de mon textarea) il ne sa passe absolument rien.

Je fais portant un

Code :

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

$('#test').val("du texte");

et cela fonctionne bien.

Je ne comprend vraiment pas pourquoi les events ne fonctionnent pas

**Erwan3110** · 04/06/2019, 21h35

Nom : Capture11.PNG
Affichages : 3194
Taille : 38,1 Ko

Voila ce que j'ai fais, j'ai donc bien le message dans la console, mais le textarea n'envoie pas les données ...

**Sodium** · 04/06/2019, 21h39

Mais encore une fois tu veux faire quoi ? Soumettre un formulaire ? Ajouter un retour à la ligne dans le textarea ?
Quoi que ce soit il y a certainement une technique moins barbare et plus fiable pour le faire que de simuler une entrée clavier.

**Erwan3110** · 04/06/2019, 21h41

Je veux envoyer les données du textarea, mais sur la page il n'y a pas de bouton pour le faire.
Le site est comme un chat, en appuyant sur entrée on envoie le contenu du textarea

**Toufik83** · 04/06/2019, 23h16

Salut,
voilà un exemple très simple qui permet d'envoyer la valeur du textarea vers un fichier php en appuyant sur la touche entrer.

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
46
47
48
49
50
 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>La touche entrer</title>
 
	<script
	  src="https://code.jquery.com/jquery-3.4.1.js"
	  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
	  crossorigin="anonymous">
        </script>
 
	<script>
        $(function(){
                var codeTouche,valeur_area;
                $('#ID_textarea').on("keypress", function(event){
                        codeTouche = event.keyCode;
                        valeur_area=$(this).val();
                        if(codeTouche==13){
                                console.log('Évenement keypress : ' + codeTouche+", valeur textarea :"+valeur_area);
                                if(valeur_area.trim()!=''){
                                        $.ajax({
                                                url:'formulaire.php'
                                                ,method:'post'
                                                ,dataType:'json'
                                                ,data:{textarea:valeur_area}
                                        })
                                        .done(function(data){
                                                $('#console').append("<p>"+data.text+"</p>");
                                        })
                                        .fail(function(err){
                                                alert('Erreur ajax :'+err.responseText);
                                       });
                                }
                                else{
                                        console.log('Veuillez écrire au moins un caractère dans le textarea !');
                                }
                        }
                        
                });
        });
 
        </script>
</head>
<body>
	<textarea id="ID_textarea" name="text_area"></textarea>
	<div id='console'></div>
</body>
</html>

Le fichier formulaire.php :

Code :

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

1
2
3
4
5
6
7
 
<?php 
$donnee=[];
$text=$_POST['textarea'];
$donnee['text']=$text;
echo json_encode($donnee);
?>

Edit: Si tu ne veux pas que la page s'actualise à chaque envoie de donnée, alors la solution c'est $.ajax.

**Sodium** · 05/06/2019, 07h23

Envoyé par Erwan3110

Je veux envoyer les données du textarea, mais sur la page il n'y a pas de bouton pour le faire.
Le site est comme un chat, en appuyant sur entrée on envoie le contenu du textarea

Eh bien fais comme je te disais, déclencher un submit sur le formulaire (s'il y en a bien un, tu ne nous a pas montré ton HTML). De toute manière, faire un enter sur un textarea n'envoie pas le formulaire ça fait un retour à la ligne.

**NoSmoking** · 05/06/2019, 11h04

Il ne s'agit donc pas de simulation mais simplement d'action, on tourne en rond et on revient à la proposition faite au post#2, en définissant bien sûr une « vraie » action !

**Watilin** · 05/06/2019, 16h06

@Erwan3110, la question est de savoir si tu développes :

un site / appli, auquel cas tu as la maîtrise du code qui envoie les données, et tu dois donc le modifier pour qu’il les envoie au moment que tu veux ;
un userscript ou une extension pour personnaliser ton utilisation d’un site / appli fait par quelqu’un d’autre.

Dans le second cas, il faut que tu trouves le gestionnaire d’évènement qui réagit à la touche entrée, car comme l’ont dit les autres, un textarea n’a pas de réaction par défaut à la touche entrée, s’il n’est pas dans un formulaire.
Une fois que tu auras trouvé le gestionnaire, tu devras t’arranger pour :

l’appeler s’il est accessible depuis le contexte global ;
imiter son comportement dans le cas contraire.

**Erwan3110** · 06/06/2019, 14h46

Effectivement je développe une extension chrome, qui va fonctionner sur un site que je n'ai pas créé.

Voici le code html du textarea du site :

Code html :

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

1
2
3
<div class="inputText ">
       <textarea class="messageInput" placeholder="Écrire un message..." data-tribute="true"></textarea>
</div>

C'est une balise simple, sans bouton pour envoyer le message.

Pour le code javascript qui utilise la classe messageInput :

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
key: "render",
                value: function() {
                    var e, t = this,
                        n = this.props.game;
                    return i.a.createElement("div", {
                        className: "inputText ".concat(n.canChat ? "" : "disable")
                    }, i.a.createElement("textarea", {
                        className: "messageInput",
                        placeholder: "Écrire un message...",
                        ref: function(e) {
                            return t.element = e
                        },
                        disabled: !n.canChat,
                        value: n.canChat ? void 0 : ""
                    }), (null === (e = n.self) || void 0 === e ? void 0 : e.isInLove) && i.a.createElement("div", {
                        className: "privateMessagesButton " + (n.ui.chat.public.alert || n.ui.chat.private.alert ? "notifications" : ""),
                        title: "Parler avec votre allié",
                        onClick: function(e) {
                            n.ui.chat.displayPrivate = !n.ui.chat.displayPrivate, n.ui.chat.public.alert = !1, n.ui.chat.private.alert = !1
                        }
                    }, i.a.createElement(Vn, {
                        src: "/assets/img/secret-chat.svg",
                        alt: "Chat privé"
                    }), i.a.createElement("div", {
                        className: "pinNewMessages"
                    })))
                }

Le fichier js fait plus de 20 000 lignes, je ne vais pas pouvoir le mettre ...

**Watilin** · 06/06/2019, 18h04

Il n’y a pas de gestionnaire d’évènement clavier là-dedans. Il doit être sur un parent. Vérifie aussi qu’il n’y a pas un form avec un évènement submit.

**Erwan3110** · 06/06/2019, 19h38

J'ai regarder dans le fichier HTML, il n'y a pas de balise "form" ni de balise "submit"

Au dessus du code de mon dernier message il y a une comparaison entre la touche 13 et la touche pressé :

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
return g()(t, e), u()(t, [{
                key: "componentDidMount",
                value: function() {
                    var e = this,
                        t = new Mi.a({
                            values: this.props.game.players,
                            lookup: function(e) {
                                return e.user.username
                            },
                            selectTemplate: function(e) {
                                return "@".concat(e.original.user.username)
                            }
                        });
                    t.attach(this.element), this.props.game.ui.chat.input = this.element, this.element.addEventListener("keydown", function(n) {
                        if (13 == n.keyCode && !t.isActive) {
                            n.preventDefault();
                            var r = e.element.value.trim();
                            "" !== r && e.props.game.socket.emit("chat", {
                                text: r,
                                private: e.props.game.ui.chat.displayPrivate
                            }), e.element.value = ""
                        }
                    })
                }
            }, {
                key: "render",
                value: function() {
                    var e, t = this,
                        n = this.props.game;
                    return i.a.createElement("div", {
                        className: "inputText ".concat(n.canChat ? "" : "disable")
                    }, i.a.createElement("textarea", {
                        className: "messageInput",
                        placeholder: "Écrire un message...",
                        ref: function(e) {
                            return t.element = e
                        },
                        disabled: !n.canChat,
                        value: n.canChat ? void 0 : ""
                    }), (null === (e = n.self) || void 0 === e ? void 0 : e.isInLove) && i.a.createElement("div", {
                        className: "privateMessagesButton " + (n.ui.chat.public.alert || n.ui.chat.private.alert ? "notifications" : ""),
                        title: "Parler avec votre allié",
                        onClick: function(e) {
                            n.ui.chat.displayPrivate = !n.ui.chat.displayPrivate, n.ui.chat.public.alert = !1, n.ui.chat.private.alert = !1
                        }
                    }, i.a.createElement(Vn, {
                        src: "/assets/img/secret-chat.svg",
                        alt: "Chat privé"
                    }), i.a.createElement("div", {
                        className: "pinNewMessages"
                    })))
                }

Dans ce code il y a la fonction

Code :

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

1
2
3
4
e.props.game.socket.emit("chat", {
                                text: r,
                                private: e.props.game.ui.chat.displayPrivate
                            })

Elle doit servir à l'envoie des messages je pense, comment je pourrais la réutiliser ?

Simuler l'appui sur la touche entrée

jQuery

Discussions similaires

Partager

Partager