Ajouter du texte à la position du curseur dans une zone de texte
Soyez le premier à donner votre avis sur cette source.
Snippet vu 23 104 fois - Téléchargée 29 fois
Contenu du snippet
Pour pouvoir insérer du texte (par exemple provenant d'une fonction copier/coller qui a été programmée manuellement.
Sans créer de "range texte" on ne peut pas savoir où est le curseur, et si on veut insérer du texte dans une zone de texte, il faut le faire au début ou à la fin de la zone.
la fonction getPosCurseur(objetTextArea) donne la position du curseur dans la zone de texte.
la fonction insereChaine(texte) permet d'insérer la chaine désirée à la position du curseur trouvée par la fonction getPosCurseur()
Sans créer de "range texte" on ne peut pas savoir où est le curseur, et si on veut insérer du texte dans une zone de texte, il faut le faire au début ou à la fin de la zone.
la fonction getPosCurseur(objetTextArea) donne la position du curseur dans la zone de texte.
la fonction insereChaine(texte) permet d'insérer la chaine désirée à la position du curseur trouvée par la fonction getPosCurseur()
Source / Exemple :
<HTML>
<BODY>
<form NAME="mForm">
<input TYPE="button" VALUE="Test d'écriture" ONCLICK="insereChaine(this.value)">
<input TYPE="button" VALUE="Autre texte inséré" ONCLICK="insereChaine(this.value)">
<input TYPE="button" VALUE="Essais encore" ONCLICK="insereChaine(this.value)">
<br>
<textarea NAME="mTextArea" ROWS="5" COLS="100" ONCHANGE="setPosCurseur()" ONCLICK="setPosCurseur()"></textarea>
</form>
</body>
</html>
<script>
var g_posCurseur; // variable global positition du curseur
//définit la postition du curseur
function setPosCurseur() {
g_posCurseur = getPosCurseur(mForm.mTextArea);
}
//retourne l'emplacement du curseur
function getPosCurseur(oTextArea) {
//sauve le contenu avant modification de la zone de texte
var sAncienTexte = oTextArea.value;
//crer un objet "Range Objet" et sauve son texte avant modification
var oRange = document.selection.createRange();
var sAncRangeTexte = oRange.text;
//cette chaine ne doit pas se retrouver dans la zone de texte !
var sMarquer = String.fromCharCode(28)+String.fromCharCode(29)+String.fromCharCode(30);
//insère la chaine où le curseur est
oRange.text = sAncRangeTexte + sMarquer; oRange.moveStart('character', (0 - sAncRangeTexte.length - sMarquer.length));
//sauver la nouvelle chaine
var sNouvTexte = oTextArea.value;
//remet la valeur du texte à son ancienne valeur
oRange.text = sAncRangeTexte;
//recherche dans la nouvelle chaine et trouve l'emplacement
// de la chaîne de marquage et renvoie la position
for (i=0; i <= sNouvTexte.length; i++) {
var sTemp = sNouvTexte.substring(i, i + sMarquer.length);
if (sTemp == sMarquer) {
var cursorPos = (i - sAncRangeTexte.length);
return cursorPos;
}
}
}
//insère la chaine dans la zone de texte où le curseur est
function insereChaine(sChaine) {
//si curseur n'a pas de position : insère la chaine à la fin
if (typeof(g_posCurseur)=='undefined') {
mForm.mTextArea.value+=sChaine;
}else {
var firstPart = mForm.mTextArea.value.substring(0, g_posCurseur);
var secondPart = mForm.mTextArea.value.substring(g_posCurseur,mForm.mTextArea.value.length);
mForm.mTextArea.value = firstPart + sChaine + secondPart;
}
}
</SCRIPT>
A voir également
- Ajouter du texte à la position du curseur dans une zone de texte
- Position du curseur dans une zone de texte ✓ - Forum - Visual Basic
- Javascript : Ajouter du texte a la position du curseur dans un textarea - CodeS SourceS - Guide
- Position du curseur par rapport au texte d'un EDITTEXT ✓ - Forum - C / C++ / C++.NET
- Comment ajouter du texte sur canva ✓ - Forum - Delphi / Pascal
- Changer la position du curseur [dev c++] - Codes sources - C / C++ / C++.NET (Système)
Pour ce qui est de FireFox, la fonction est déjà intégré à votre objet input , vous pouvez l'atteindre de la facon suivante : [votre_input].selectionStart
et SANS faire 1000 if pour faire un code different pour chaque navigateur...
si par hazard qqn est au courant...
à rajouter onKeyUp=setPosCurseur() dans le text area pour un meilleur résultat
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.