Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

INSERTION À PARTIR DE LA POSITION DU CURSEUR DANS UNE TEXTBOX OU AUTRE.


Information sur la source

Catégorie :Formulaire Classé sous : Insertion, Curseur, Textbox Niveau : Débutant Date de création : 17/12/2007 Date de mise à jour : 19/12/2007 20:11:51 Vu : 4 750

Note :
Aucune note

Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

Description

D'aprés ce que j'ai vu,il marche déja sur IE et Mozilla.Et donc comme son titre l'indique,il permet d'effectuer une insertion à partir de la position du curseur dans une textbox ou autre.Le modebb permet de récuperer le texte selectionné et de le mettre dans des balises.Ainsi quand le modebb est activé (modebb = true) la valeur du texte à ajouter doit contenir les balises de fin et de début tels que [u][/u].
 

Source

  • <html>
  • <body>
  • <input name="msg" id="modif"><input type="button" value="Insert" onclick="insert('modif','[u][/u]',true)">
  • <script>
  • <!--
  • function insert(box,text,modebb)
  • {
  • box = document.getElementById(box);
  • var str = box.value;
  • var msgstart = box.selectionStart,msgend = box.selectionEnd; // recupération de la position du curseur
  • var balise = text.split("]");
  • var balisedebut = balise[0] + "]",balisefin = balise[1] + "]"; //recuperation de la balise de debut et de fin
  • if(typeof msgstart == "undefined")// cas IE
  • {
  • box.focus();
  • var caretPos = document.selection.createRange().duplicate();
  • if(!modebb)
  • caretPos.text = text; // modification du texte séléctionné
  • else
  • caretPos.text = balisedebut + caretPos.text + balisefin; // modification du texte séléctionné avec les balises
  • }
  • else // cas autre
  • {
  • if(!modebb)
  • box.value = str.substring(0,msgstart) + text + str.substring(msgend,str.length); // ajout simple a partir de la position du curseur
  • else
  • box.value = str.substring(0,msgstart) + balisedebut + str.substring(msgstart,msgend) + balisefin + str.substring(msgend,str.length); // ici je recupere le texte selectionné et ajoute une balise au début et à la fin
  • box.setSelectionRange(msgstart+text.length,msgstart+text.length); // repositionne le curseur dans la textbox
  • }
  • box.focus();
  • }
  • -->
  • </script>
  • </body>
  • </html>
<html>
<body>
<input name="msg" id="modif"><input type="button" value="Insert" onclick="insert('modif','[u][/u]',true)">
<script>
<!--
function insert(box,text,modebb)
{
box = document.getElementById(box);
var str = box.value;
var msgstart = box.selectionStart,msgend = box.selectionEnd; // recupération de la position du curseur
var balise = text.split("]"); 
var balisedebut = balise[0] + "]",balisefin = balise[1] + "]"; //recuperation de la balise de debut et de fin 
 if(typeof msgstart == "undefined")// cas IE
 {	
 box.focus();
 var caretPos = document.selection.createRange().duplicate();
  if(!modebb)
  caretPos.text = text; // modification du texte séléctionné 
  else
  caretPos.text = balisedebut + caretPos.text + balisefin; // modification du texte séléctionné  avec les balises
  
 }
 else // cas autre
 {
  if(!modebb)
  box.value = str.substring(0,msgstart) + text + str.substring(msgend,str.length); // ajout simple a partir de la position du curseur
  else
  box.value = str.substring(0,msgstart) + balisedebut + str.substring(msgstart,msgend) + balisefin + str.substring(msgend,str.length); // ici je recupere le texte selectionné et ajoute une balise au début et à la fin
 box.setSelectionRange(msgstart+text.length,msgstart+text.length); // repositionne le curseur dans la textbox
 }
box.focus();	
}
-->
</script>
</body>
</html>

Historique

17 décembre 2007 21:36:57 :
Oubli de mot dans la description.
17 décembre 2007 22:43:29 :
Ajout d'un mode ressemblant aux bbcode
19 décembre 2007 19:28:02 :
ajout de commentaire suite a une demande
19 décembre 2007 20:11:51 :
rectification d'un bug qui empechait l'insertion sur selection

Commentaires et avis

signaler à un administrateur
Commentaire de zave le 18/12/2007 22:49:15

Sympa,code utile, mais tu aurais pu commander un peu ton code, car on voit en essayant que ça fonctionne mais on sait pas trop pourquoi.

signaler à un administrateur
Commentaire de abdelaziz_info le 18/12/2007 23:37:28

Bonjour ;
Je pense qu'avec ceci on fait la même chose. !?

<html>
<body>
<script type="text/javascript">
<!--
function insert()
{
document.getElementById('modif').value = document.getElementById('modif').value + '[u][/u]';
msg.focus();
}
-->
</script>
<input name="msg" id="modif">
<input type="button" value="Insert" onclick="insert()">
</body>
</html>

signaler à un administrateur
Commentaire de vbott le 19/12/2007 19:22:30

Désolé pour le manque de commentaire je pensais avoir été assez clair , donc je m'y pencherais prochainement.Et pour répondre a abdelaziz_info, ton code rajoute simplement a la fin de la textbox alors que j'effectue une insertion a partir du curseur de la textbox.De plus en mode bb je récupere le texte selectioné et le balise.

signaler à un administrateur
Commentaire de PetoleTeam le 19/12/2007 19:54:27

Bonjour,

L'insertion ne fonctionne pas sous FireFox, Opera et Safari...

J'ai d'ailleurs fait une approche en son temps, à voir pour info sur http://www.javascriptfr.com/code.aspx?ID=39612

;0)

signaler à un administrateur
Commentaire de PetoleTeam le 19/12/2007 20:01:24

OUILLE !
Je rectifie, il fallait lire l'insertion sur sélection ...l'insertion tout court fonctionne nickel !

signaler à un administrateur
Commentaire de vbott le 19/12/2007 20:04:04

Firefox tu es sur , j'ai pourtant testé recamment et cela fonctionnait bien. En tout cas tu connaitrais la source de son dyfonctionnement sur les navigateurs que tu as cité ?

signaler à un administrateur
Commentaire de vbott le 19/12/2007 20:23:45

Désolé de te contredire mais j'ai fait les différents tests sur opéra et sur safari et cela s'est révelé concluant.  

signaler à un administrateur
Commentaire de vbott le 19/12/2007 20:29:05

Encore désolé, au temps pour moi je n'avais pas bien compris. L'erreur etant corrigée depuis peu ils fonctionnent sur ces navigateurs.

signaler à un administrateur
Commentaire de abdelaziz_info le 20/12/2007 00:20:29

c'est bien, vbott
Avant les changements c'été la même chose !
Mai maintenant ton code fonctionne.
boncourage

signaler à un administrateur
Commentaire de joebuz le 09/03/2008 15:33:45

super, ça fonctionne nikel !

est-il possible de cacher les balises et d'afficher directement dans la textbox le texte en gras, en italique ou en souligné (selon le choix) dans

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Position curseur dans textbox [ par Coolpix08 ] Bonjour,Voila je désespere un peu et il commence a ce faire tard...J'aimerais simplement récupérer la position du curseur dans le textbox en debut de Insertion champ [ par Sniperman113 ] Bonjour,J'ai un petit soucis avec mon code.Enfaite mon script devrait permettre à l'utilisateur grâce à un simple clique de mettre le contenu d'un cha Placer le curseur à cet endroit [ par Guidelor ] Bonjour J'ai un forum avec une zone texte dans laquelle j'insere des balises genre "&lt;italic&gt;&lt;/italic&gt;" avec des boutons au dessus de la zo Pb : Remplissage d'un textbox [ par ahikaz ] Salut, j'ai créé une liste déroulante et j veux que lorsque l'utilisateur clique sur l'une des valeurs alors 2 textbox se remplissent.Pour le moment j curseur et textarea [ par Slyders ] Bonjour, j'ai un ptit problème :)Je veu insérer des tabulation dans mon textarea, alors j'ai créer un bouton ! &lt;Input type="b Taille d'un curseur en CSS [ par psylo66 ] Bonjour, voila ca fait un petit moment  je cherche a changer la taille du curseur en CSS.j'ai réussit à changer l'image de mon curseur via cette ligne Pb récupération position curseur [ par jlfcdvg ] BonjourJe voudrais soumettre ce problème à votre sagacité.Sur une page destinée à un fichier d'aide au format chm, j'affiche une image dans une bulleM Positionner curseur en haut de la page [ par aloisio11 ] Bonjour,J'ai un problemme peut banal : Je charge une page avec plein de référence, je clique sur le haut de ma page pour pouvoir faire une recherche a Insertion ul dans un div "CSS" [ par younes371 ] Bonjour, voilà mon promblème :j'au un code php qui rempli un ul par des li :&lt;?php   //code de requ ette en php  //........// fin di code  echo '&lt Insertion das un element , les information d'un element parent XML [ par younes371 ] Bonjour, j'ai un petit souci et je demande d'aide.&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;arbre&gt;&lt;personne id="P01" sexe="F"&gt;&lt;Nom&g


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.