Comment enpêcher un clic de changer la sélection courante dans une page ?
Voilà le problème :
J'ai un champ (mettons un TEXTAREA) dans lequel je positionne le curseur.
J'ai une zone de texte qqconque (mettons dans une DIV) qui me sert de
bouton de commande.
Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans
la TEXTAREA.
Le PROBLÈME, c'est que ce ?%$/ d'Explorer me change d'abord la sélection
à cause du clic
sur la DIV, et c'est dans celle-ci que l'insertion se fait.
D'où ma question.
Il semble que le mousedown efface la sélection courante, le mousup la
rétablit sur le nouveau clic,
et le mouseclick vient ensuite.
Si j'essaie onmousedown au lieu de onclick, la selection est déjà morfée
et ça plante tout simplement.
Voir un code d'exemple ici :
http://www.contentbox.com/claude/test/selection.htm
dont voici le source :
<TEXTAREA COLS="" ROWS="">Test text</TEXTAREA>
<DIV onClick="insertText()">Click here to insert</DIV>
<SCRIPT>
function insertText()
{
var rng = document.selection.createRange();
rng.pasteHTML(" inserted ");
}
</SCRIPT>
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Claude Schneegans
... En fait, il y a carrément un bug : Dans le code suivant, j'utilise un mouseDown, donc la selection n'est pas encore changée. On le voit dans l'alert qui affiche bien TEXTAREA. Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); alert(rng.parentElement().tagName); rng.pasteHTML(" inserted "); } </SCRIPT>
... En fait, il y a carrément un bug :
Dans le code suivant, j'utilise un mouseDown, donc la selection n'est
pas encore changée.
On le voit dans l'alert qui affiche bien TEXTAREA.
Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV>
<SCRIPT>
function insertText()
{
var rng = document.selection.createRange();
alert(rng.parentElement().tagName);
rng.pasteHTML(" inserted ");
}
</SCRIPT>
... En fait, il y a carrément un bug : Dans le code suivant, j'utilise un mouseDown, donc la selection n'est pas encore changée. On le voit dans l'alert qui affiche bien TEXTAREA. Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); alert(rng.parentElement().tagName); rng.pasteHTML(" inserted "); } </SCRIPT>
scraper
Bonjour Claude Schneegans, dans le message news: tu disais :
... En fait, il y a carrément un bug : Dans le code suivant, j'utilise un mouseDown, donc la selection n'est pas encore changée. On le voit dans l'alert qui affiche bien TEXTAREA. Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); alert(rng.parentElement().tagName); rng.pasteHTML(" inserted "); } </SCRIPT>
est ce dans internet explorer que tu as ce problème ??
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code !
au final, est affiché :
inserted Click here to insert
--
Adresse invalide Merci de répondre sur le forum ... http://scraper.chez.tiscali.fr
scraper
Bonjour Claude Schneegans, dans le message
news:OeUmoYVlFHA.1148@TK2MSFTNGP12.phx.gbl
tu disais :
... En fait, il y a carrément un bug :
Dans le code suivant, j'utilise un mouseDown, donc la selection n'est
pas encore changée.
On le voit dans l'alert qui affiche bien TEXTAREA.
Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV>
<SCRIPT>
function insertText()
{
var rng = document.selection.createRange();
alert(rng.parentElement().tagName);
rng.pasteHTML(" inserted ");
}
</SCRIPT>
est ce dans internet explorer que tu as ce problème ??
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code !
au final, est affiché :
inserted Click here to insert
--
Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr
Bonjour Claude Schneegans, dans le message news: tu disais :
... En fait, il y a carrément un bug : Dans le code suivant, j'utilise un mouseDown, donc la selection n'est pas encore changée. On le voit dans l'alert qui affiche bien TEXTAREA. Par contre, la ligne suivante produit une « erreur non spécifiée » ;-(
<DIV onmousedown="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); alert(rng.parentElement().tagName); rng.pasteHTML(" inserted "); } </SCRIPT>
est ce dans internet explorer que tu as ce problème ??
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code !
au final, est affiché :
inserted Click here to insert
--
Adresse invalide Merci de répondre sur le forum ... http://scraper.chez.tiscali.fr
scraper
Claude Schneegans
est ce dans internet explorer que tu as ce problème ??
Ben voui, sinon je ne sarais pas ici ;-)
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code ! au final, est affiché : inserted Click here to insert
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte, parce que le curseur y est déplacé, pas dans le textarea où je voudrais faire l'insertion. C'est ça le problème : je voudrais pouvoir annuler le changement de sélection dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu là ousque était le curseur avant.
est ce dans internet explorer que tu as ce problème ??
Ben voui, sinon je ne sarais pas ici ;-)
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code !
au final, est affiché :
inserted Click here to insert
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte,
parce que le curseur
y est déplacé, pas dans le textarea où je voudrais faire l'insertion.
C'est ça le problème : je voudrais pouvoir annuler le changement de
sélection
dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu
là ousque était le curseur avant.
est ce dans internet explorer que tu as ce problème ??
Ben voui, sinon je ne sarais pas ici ;-)
j'ai essayé par curiosité et ici, ça fonctionne plutôt bien, ton code ! au final, est affiché : inserted Click here to insert
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte, parce que le curseur y est déplacé, pas dans le textarea où je voudrais faire l'insertion. C'est ça le problème : je voudrais pouvoir annuler le changement de sélection dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu là ousque était le curseur avant.
scraper
Bonjour Claude Schneegans, dans le message news:eANf$ tu disais :
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte, parce que le curseur y est déplacé, pas dans le textarea où je voudrais faire l'insertion. C'est ça le problème : je voudrais pouvoir annuler le changement de sélection dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu là ousque était le curseur avant.
OK ... sauf que dans ton code, j'ai pas de textarea ??
--
Adresse invalide Merci de répondre sur le forum ... http://scraper.chez.tiscali.fr
scraper
Bonjour Claude Schneegans, dans le message
news:eANf$HelFHA.3312@tk2msftngp13.phx.gbl
tu disais :
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte,
parce que le curseur
y est déplacé, pas dans le textarea où je voudrais faire l'insertion.
C'est ça le problème : je voudrais pouvoir annuler le changement de
sélection
dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu
là ousque était le curseur avant.
OK ... sauf que dans ton code, j'ai pas de textarea ??
--
Adresse invalide
Merci de répondre sur le forum ...
http://scraper.chez.tiscali.fr
Bonjour Claude Schneegans, dans le message news:eANf$ tu disais :
Oui, sauf que "inserted" est inséré là où tu cliques dans le texte, parce que le curseur y est déplacé, pas dans le textarea où je voudrais faire l'insertion. C'est ça le problème : je voudrais pouvoir annuler le changement de sélection dû au clic sur qqch qui me sert de contrôle pour que l'action ait lieu là ousque était le curseur avant.
OK ... sauf que dans ton code, j'ai pas de textarea ??
--
Adresse invalide Merci de répondre sur le forum ... http://scraper.chez.tiscali.fr
scraper
Jean
Bonjour,
Comment enpêcher un clic de changer la sélection courante dans une page ? Voilà le problème : J'ai un champ (mettons un TEXTAREA) dans lequel je positionne le curseur. J'ai une zone de texte qqconque (mettons dans une DIV) qui me sert de bouton de commande. Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans la TEXTAREA. Le PROBLÈME, c'est que ce ?%$/ d'Explorer me change d'abord la sélection à cause du clic sur la DIV, et c'est dans celle-ci que l'insertion se fait.
D'où ma question. Il semble que le mousedown efface la sélection courante, le mousup la rétablit sur le nouveau clic, et le mouseclick vient ensuite. Si j'essaie onmousedown au lieu de onclick, la selection est déjà morfée et ça plante tout simplement.
Voir un code d'exemple ici : http://www.contentbox.com/claude/test/selection.htm
dont voici le source :
<TEXTAREA COLS="" ROWS="">Test text</TEXTAREA> <DIV onClick="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); rng.pasteHTML(" inserted "); } </SCRIPT>
D'abord mettre la propriété unselectable de la div sur on.
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la proriété text du textrange retourné par la méthode createTextRange au lieu de la méthode pasteHTML.
Soit, au total :
<!---8<---> <TEXTAREA COLS="" ROWS=""> Test text </TEXTAREA> <DIV unselectable="on" onclick="insertText()"> Click here to insert </DIV>
Comment enpêcher un clic de changer la sélection courante dans une page ?
Voilà le problème :
J'ai un champ (mettons un TEXTAREA) dans lequel je positionne le curseur.
J'ai une zone de texte qqconque (mettons dans une DIV) qui me sert de bouton
de commande.
Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans la
TEXTAREA.
Le PROBLÈME, c'est que ce ?%$/ d'Explorer me change d'abord la sélection à
cause du clic
sur la DIV, et c'est dans celle-ci que l'insertion se fait.
D'où ma question.
Il semble que le mousedown efface la sélection courante, le mousup la
rétablit sur le nouveau clic,
et le mouseclick vient ensuite.
Si j'essaie onmousedown au lieu de onclick, la selection est déjà morfée et
ça plante tout simplement.
Voir un code d'exemple ici :
http://www.contentbox.com/claude/test/selection.htm
dont voici le source :
<TEXTAREA COLS="" ROWS="">Test text</TEXTAREA>
<DIV onClick="insertText()">Click here to insert</DIV>
<SCRIPT>
function insertText()
{
var rng = document.selection.createRange();
rng.pasteHTML(" inserted ");
}
</SCRIPT>
D'abord mettre la propriété unselectable de la div sur on.
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la proriété
text du textrange retourné par la méthode createTextRange au lieu de la
méthode pasteHTML.
Soit, au total :
<!---8<--->
<TEXTAREA COLS="" ROWS="">
Test text
</TEXTAREA>
<DIV unselectable="on" onclick="insertText()">
Click here to insert
</DIV>
Comment enpêcher un clic de changer la sélection courante dans une page ? Voilà le problème : J'ai un champ (mettons un TEXTAREA) dans lequel je positionne le curseur. J'ai une zone de texte qqconque (mettons dans une DIV) qui me sert de bouton de commande. Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans la TEXTAREA. Le PROBLÈME, c'est que ce ?%$/ d'Explorer me change d'abord la sélection à cause du clic sur la DIV, et c'est dans celle-ci que l'insertion se fait.
D'où ma question. Il semble que le mousedown efface la sélection courante, le mousup la rétablit sur le nouveau clic, et le mouseclick vient ensuite. Si j'essaie onmousedown au lieu de onclick, la selection est déjà morfée et ça plante tout simplement.
Voir un code d'exemple ici : http://www.contentbox.com/claude/test/selection.htm
dont voici le source :
<TEXTAREA COLS="" ROWS="">Test text</TEXTAREA> <DIV onClick="insertText()">Click here to insert</DIV> <SCRIPT> function insertText() { var rng = document.selection.createRange(); rng.pasteHTML(" inserted "); } </SCRIPT>
D'abord mettre la propriété unselectable de la div sur on.
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la proriété text du textrange retourné par la méthode createTextRange au lieu de la méthode pasteHTML.
Soit, au total :
<!---8<---> <TEXTAREA COLS="" ROWS=""> Test text </TEXTAREA> <DIV unselectable="on" onclick="insertText()"> Click here to insert </DIV>
OK ... sauf que dans ton code, j'ai pas de textarea ??
Dans l'exemple en entier dont j'ai donné l'adresse : http://www.contentbox.com/claude/test/selection.htm Il y a un TEXTAREA
Claude Schneegans
D'abord mettre la propriété unselectable de la div sur on.
Bon, ça ça marche en effet. L'ennui, c'est que j'ai volontairement simplifié mon extrait de code pour fins de discussion. Dans l'outil que je développe, j'ai aussi des champs à remplir, si je les rends tous « unselectable », ils ne sont plus éditables. Il faudrait vraiment que je puisse sauvegarder la sélection courante, puis la restaurer avant le pasteHTML, mais ça ne semble pas possible. La solution serait de faire toute l'édition dans une sur fenêtre à part, mais il y a tellement de suppresseurs de Popup de ?%$/" qu'il n'y a plus moyen de travailler avec ça. Y nous feront jamais tant rire qu'ils nous font ch?%$/ ;-)
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la proriété text du textrange retourné par la méthode createTextRange au
lieu de la méthode pasteHTML.
Voui, voui, createRange, c'est exactement ce que je fais : « var rng = document.selection.createRange(); rng.pasteHTML(" inserted "); »
D'abord mettre la propriété unselectable de la div sur on.
Bon, ça ça marche en effet. L'ennui, c'est que j'ai volontairement
simplifié mon extrait de code
pour fins de discussion. Dans l'outil que je développe, j'ai aussi des
champs à remplir, si je les rends
tous « unselectable », ils ne sont plus éditables.
Il faudrait vraiment que je puisse sauvegarder la sélection courante,
puis la restaurer avant le pasteHTML,
mais ça ne semble pas possible.
La solution serait de faire toute l'édition dans une sur fenêtre à part,
mais il y a tellement de suppresseurs
de Popup de ?%$/" qu'il n'y a plus moyen de travailler avec ça.
Y nous feront jamais tant rire qu'ils nous font ch?%$/ ;-)
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la
proriété text du textrange retourné par la méthode createTextRange au
lieu de la méthode pasteHTML.
Voui, voui, createRange, c'est exactement ce que je fais :
« var rng = document.selection.createRange();
rng.pasteHTML(" inserted "); »
D'abord mettre la propriété unselectable de la div sur on.
Bon, ça ça marche en effet. L'ennui, c'est que j'ai volontairement simplifié mon extrait de code pour fins de discussion. Dans l'outil que je développe, j'ai aussi des champs à remplir, si je les rends tous « unselectable », ils ne sont plus éditables. Il faudrait vraiment que je puisse sauvegarder la sélection courante, puis la restaurer avant le pasteHTML, mais ça ne semble pas possible. La solution serait de faire toute l'édition dans une sur fenêtre à part, mais il y a tellement de suppresseurs de Popup de ?%$/" qu'il n'y a plus moyen de travailler avec ça. Y nous feront jamais tant rire qu'ils nous font ch?%$/ ;-)
Ensuite, comme une textarea n'a pas de rendu HTML, utiliser la proriété text du textrange retourné par la méthode createTextRange au
lieu de la méthode pasteHTML.
Voui, voui, createRange, c'est exactement ce que je fais : « var rng = document.selection.createRange(); rng.pasteHTML(" inserted "); »
Claude Schneegans
Salut,
la solution semble être de copier le textRange avec duplicate() avant d'éditer les champs, ce qui déplace la sélection, ensuite d'appliquer le pasteHTML à cette copie au lieu de la sélection courante. Ça ne restore pas la sélection, mais au moins la modification est appliquée au bon endroit. Dans le genre compliqué et tordu, on peut dire que Microstuff a fait fort avec ses maudits ranges à la mords-moi-la ! ;-)) Merci à tous.
Salut,
la solution semble être de copier le textRange avec duplicate() avant
d'éditer les champs,
ce qui déplace la sélection, ensuite d'appliquer le pasteHTML à cette
copie au lieu de la sélection courante.
Ça ne restore pas la sélection, mais au moins la modification est
appliquée au bon endroit.
Dans le genre compliqué et tordu, on peut dire que Microstuff a fait
fort avec ses maudits ranges à la mords-moi-la ! ;-))
Merci à tous.
la solution semble être de copier le textRange avec duplicate() avant d'éditer les champs, ce qui déplace la sélection, ensuite d'appliquer le pasteHTML à cette copie au lieu de la sélection courante. Ça ne restore pas la sélection, mais au moins la modification est appliquée au bon endroit. Dans le genre compliqué et tordu, on peut dire que Microstuff a fait fort avec ses maudits ranges à la mords-moi-la ! ;-)) Merci à tous.
Bul
bonjour,
un TEXTAREA dans lequel je positionne le curseur. une DIV qui me sert de bouton de commande. Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans la TEXTAREA.
j'arrive peut-être en retard, et/ou je n'ai pas tout compris, mais en rendant le focus au textarea ?
<HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> function mettre(ou,quoi) { ou.focus(); document.selection.createRange().text=quoi; } </script> </HEAD> <BODY> <textarea name="txt"> exemple de texte dans le textarea </textarea> <div onclick="mettre(txt,'exemple de texte à insérer');"> exemple de texte dans le div </div> </BODY> </HTML>
@+
bonjour,
un TEXTAREA dans lequel je positionne le curseur.
une DIV qui me sert de bouton de commande.
Quand je clique dessus, je voudrais insérer qqch
à l'endroit choisi dans la TEXTAREA.
j'arrive peut-être en retard, et/ou je n'ai pas
tout compris, mais en rendant le focus au
textarea ?
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function mettre(ou,quoi)
{ ou.focus();
document.selection.createRange().text=quoi; }
</script>
</HEAD>
<BODY>
<textarea name="txt">
exemple de texte dans le textarea
</textarea>
<div onclick="mettre(txt,'exemple de texte à insérer');">
exemple de texte dans le div
</div>
</BODY>
</HTML>
un TEXTAREA dans lequel je positionne le curseur. une DIV qui me sert de bouton de commande. Quand je clique dessus, je voudrais insérer qqch à l'endroit choisi dans la TEXTAREA.
j'arrive peut-être en retard, et/ou je n'ai pas tout compris, mais en rendant le focus au textarea ?
<HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> function mettre(ou,quoi) { ou.focus(); document.selection.createRange().text=quoi; } </script> </HEAD> <BODY> <textarea name="txt"> exemple de texte dans le textarea </textarea> <div onclick="mettre(txt,'exemple de texte à insérer');"> exemple de texte dans le div </div> </BODY> </HTML>
