Kheys
2 271
modifications
« Fonctionnement technique de Jeuxvideo.com » : différence entre les versions
m
→Passage en React
| (5 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 292 : | Ligne 299 : | ||
En revanche, pour manipuler le champ entièrement (suppression, remplacement) {{fleched}} la fonction a moins d'intérêt.<br> | 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. | 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 == | ||