Kheys
2 271
modifications
« Fonctionnement technique de Jeuxvideo.com » : différence entre les versions
m
→Passage en React
m (typo très mineures) |
|||
| (11 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 246 : | Ligne 246 : | ||
<s>messageTextArea.value = message;</s> | <s>messageTextArea.value = message;</s> | ||
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; | ||
| Ligne 255 : | Ligne 255 : | ||
} | } | ||
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"); | |||
En 1er on donne | textarea.dispatchEvent(new Event("input", { bubbles: true })); | ||
} | |||
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. | |||
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 == | ||