Ajout d'un texte au niveau du curseur (ie/mozilla)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 090 fois - Téléchargée 29 fois

Contenu du snippet

J'ai eu besoin pour un éditeur de texte (type celui de ce site) d'inserer du texte à la position du curseur, et non à la fin du texte, et j'ai trouvé ce code (que j'ai à peine modifié) sur PhpMyAdmin, qui a l'énorme avantage de marcher avec IE et Mozilla/FireFox

Source / Exemple :


function insertValue(chaineAj) {
    var myForm = document.WriteForm.text;
        //IE support
        if (document.selection) {
            myForm.focus();
            sel = document.selection.createRange();
            sel.text = chaineAj;
            document.WriteForm.focus();
        }
        //MOZILLA/NETSCAPE support
        else if (document.WriteForm.text.selectionStart || document.WriteForm.text.selectionStart == "0") {
            var startPos = document.WriteForm.text.selectionStart;
            var endPos = document.WriteForm.text.selectionEnd;
            var chaine = document.WriteForm.text.value;

            myForm.value = chaine.substring(0, startPos) + chaineAj + chaine.substring(endPos, chaine.length);
        } else {
            myForm.value += chaineAj;
        }
    }

Conclusion :


exemple d'utilisation :
<input type="button" onclick="insertValue('[g] /g')" value="gras" />

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
mercredi 11 avril 2007
Statut
Membre
Dernière intervention
10 mai 2010

je suis tombé sur ce code que j'ai aimé merci! je propose une mise à jour qui permet de sélectionner la textarea par son id:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK HREF="style.css" TYPE="text/css" REL="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" >
function insertValue(chaineAj,id) {
var myForm = document.getElementById(id);
//IE support
if (document.selection) {
myForm.focus();
sel = document.selection.createRange();
sel.text = chaineAj;
document.getElementById(id).focus();
}
//MOZILLA/NETSCAPE support
else if (document.getElementById(id).selectionStart || document.getElementById(id).selectionStart == "0") {
var startPos = document.getElementById(id).selectionStart;
var endPos = document.getElementById(id).selectionEnd;
var chaine = document.getElementById(id).value;

myForm.value = chaine.substring(0, startPos) + chaineAj + chaine.substring(endPos, chaine.length);
} else {
myForm.value += chaineAj;
}
}
</script>
</HEAD>

[javascript:void(0); texte en gras</srtong>','text');"> gras ] |[javascript:void(0); italique ]
<form name ="WriteForm" id="WriteForm">
<textarea name="text" id="text" cols="45" rows="5"></textarea>
</form>

</html>
Messages postés
84
Date d'inscription
lundi 5 février 2007
Statut
Membre
Dernière intervention
29 avril 2009

Pour le 7 ;)
Messages postés
84
Date d'inscription
lundi 5 février 2007
Statut
Membre
Dernière intervention
29 avril 2009

Très pratique, bien que très simple ;)
Pour ceux qui débarqueront sans connaissance, copier/coller ce bout de code dans la page html ou vous avez coller le script.
<form name="WriteForm" id="WriteForm">
<textarea name="text" id="text" cols="45" rows="5"></textarea>

</form>

Je post ce message même si le sujet remonte à très loin car ce script est référencé sur "l'éditeur javascript" et je suppose que plusieurs sont comme VARBOOL lors de sa première question, donc je donne le script, pour éviter aux (très) débutant d'avoir à chercher, même si VARBOOL a donner la réponse dans son deuxième message. Au passage, un petit 7/10.
Messages postés
1
Date d'inscription
samedi 2 juin 2007
Statut
Membre
Dernière intervention
15 décembre 2007

Pratique ce petit bout de code :)

Clément.
Messages postés
20
Date d'inscription
lundi 24 mai 2004
Statut
Membre
Dernière intervention
11 mai 2006

C'est bien ce que je pensais il faut créer un formulaire appelé 'WriteForm' et un text input appelé 'text'
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.