Kheys
2 274
modifications
« Fonctionnement technique de Jeuxvideo.com » : différence entre les versions
m
→Passage en React
(→Passage en React : Reformulation pour essayer d'expliquer l'aspect simple de la fonction "simule react" et encourager les débutants) |
|||
| (10 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 248 : | Ligne 248 : | ||
Heureusement, il existe pour cela '''une fonction très utilisée''' sur le web : | Heureusement, il existe pour cela '''une fonction très utilisée''' sur le web : | ||
function | function fonctionReact(textarea, value) { | ||
const prototype = Object.getPrototypeOf(textarea); | const prototype = Object.getPrototypeOf(textarea); | ||
const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set; | const nativeSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set; | ||
nativeSetter.call(textarea, value); | nativeSetter.call(textarea, value); | ||
textarea.dispatchEvent(new Event('input', { bubbles: true })); | textarea.dispatchEvent(new Event('input', { bubbles: true })); | ||
} | |||
Fonction de '''dernier recours''' (+ bas niveau : API DOM / Simule une vrai entrée clavier) '''à éviter''' ⚠️ sauf si la première méthode est bloquée : | |||
function fonctionReact(textarea, value) { | |||
textarea.setRangeText(value, 0, textarea.value.length, "end"); | |||
textarea.dispatchEvent(new Event("input", { bubbles: true })); | |||
} | } | ||
Ensuite, il suffit simplement de faire appel à cette fonction quand on doit remplir une zone de texte : | Ensuite, il suffit simplement de faire appel à cette fonction quand on doit remplir une zone de texte : | ||
fonctionReact(messageTextArea, message); | |||
En 1er on donne la zone de texte ciblée et en 2nd le texte à insérer. | En 1er on donne la zone de texte ciblée et en 2nd le texte à insérer. | ||
Pour simplifier, <code><span style="color:red;">messageTextArea</span>.value = <span style="color:green;">message</span>;</code> devient <code> | Pour simplifier, <code><span style="color:red;">messageTextArea</span>.value = <span style="color:green;">message</span>;</code> devient <code>fonctionReact(<span style="color:red;">messageTextArea</span>, <span style="color:green;">message</span>);</code> avec cette fonction. | ||
=== Fonction officielle JVC === | === Fonction officielle JVC === | ||
| Ligne 291 : | Ligne 298 : | ||
De plus, contrairement à une modification directe du champ texte via JavaScript, cette fonction ne nécessite aucune gestion manuelle du curseur, de la sélection ou des espaces, tout est automatiquement pris en charge par la fonction elle-même. | De plus, contrairement à une modification directe du champ texte via JavaScript, cette fonction ne nécessite aucune gestion manuelle du curseur, de la sélection ou des espaces, tout est automatiquement pris en charge par la fonction elle-même. | ||
En revanche, pour manipuler le champ entièrement (suppression, remplacement) {{fleched}} la fonction a moins d'intérêt. | En revanche, pour manipuler le champ entièrement (suppression, remplacement) {{fleched}} la fonction a moins d'intérêt.<br> | ||
De plus, elle ne fonctionne que sur JVC, et ce n'est pas une fonction JavaScript universelle, contrairement à la précédente. | |||
== Liens externes == | == Liens externes == | ||