2009-08-09 7 views
0

Comment puis-je mettre en retrait chaque ligne du texte sélectionné dans un contrôle de zone de texte à l'aide de JavaScript. Quelque chose de similaire à l'Exemple de code bouton de l'éditeur Stack Overflow.Retrait du texte sélectionné avec JavaScript

MISE À JOUR: Affichage du code de Et, j'ai écrit une solution, mais ne fonctionne qu'avec Firefox (également).

Les fonctions est:

function indentSelection() { 
    var selection, newValue; 
    var txt = document.getElementById("txt"); 
    var start = txt.selectionStart; 
    var end = txt.selectionEnd; 
    // extend the selecction start until the previous line feed 
    start = txt.value.lastIndexOf("\n", start); 
    // if there isn't a line feed before, 
    // then extend the selection until the begging of the text 
    if (start == -1) { 
     start = 0; 
    } 
    // if the selection ends with a line feed, 
    // remove it from the selection 
    if (txt.value.charAt(end - 1) == "\n") { 
     end = end - 1; 
    } 
    // extend the selection end until the next line feed 
    end = txt.value.indexOf("\n", end); 
    // if there isn't a line feed after, 
    // then extend the selection end until the end of the text 
    if (end == -1) { 
     end = txt.value.length; 
    } 
    // move the selection to a new variable 
    selection = txt.value.substring(start, end); 
    // add four spaces before line feeds 
    selection = selection.replace(/^(?=.+)/mg, " "); 
    // rebuild the textarea content 
    newValue = txt.value.substring(0, start); 
    newValue += selection; 
    newValue += txt.value.substring(end); 
    txt.value = newValue; 
} 

Un exemple pourrait être:

<textarea id="txt" cols="80" rows="8">bla bla bla 
bla bla bla 
bla bla bla 
bla bla bla</textarea> 
<a href="#" onclick="indentSelection();return false;">indent selection!</a> 
+0

Vous trouverez ci-dessous une solution qui prend également en charge IE6 .. :) –

Répondre

-2

à moins d'une div qui est habillé comme un textarea vous devez utiliser tas d'espaces vides, je suppose

+1

Je suppose que vous avez tort. Une zone de texte agit exactement comme un élément pré, c'est-à-dire qu'elle affiche * chaque * espace dans son contenu. – Boldewyn

+0

convenu qu'il est espace vide - il était tard hier soir, laissez-moi fixer le commentaire – Bostone

+0

Désolé, je ne comprends toujours pas le point dans votre réponse ... – Boldewyn

2

Cela fonctionne pour moi sur firefox, n'a pas eu la chance de le tester sur d'autres navigateurs:

function indent_selection(){ 
var sel_start=document.getElementById("txt").selectionStart; 
var txt=document.getElementById("txt").value; 
var new_txt = txt.split(""); 
new_txt.splice(sel_start,0," "); 
document.getElementById("txt").value=new_txt.join(""); 

}

html:

[...] 
    <textarea id="txt">bla bla bla....</textarea> 
    <a href="#" onclick="indent_selection();">indent selection!</a> 
[...] 

MISE À JOUR: solution multi-plateforme!

Trouver here un script tiret textarea qui fonctionne également dans IE6 - je ne l'ai pas testé sur IE7 mais .. Crédits: J'ai simplement fusionné le code de Kiewic avec la fonction getTextAreaSelection trouvée sur Jerson Maglasang's blog.

+0

La scission et la méthode de jointure: Utilisez-vous vraiment la chaîne vide ou votre texte est-il juste une victime de l'éditeur SO? – Boldewyn

+0

non, ce sont des chaînes vraiment vides ... BTW: En fait, j'aime vraiment l'éditeur SO! –

+0

Je veux mettre en retrait le début de chaque ligne, pas seulement le début de la sélection, mais votre code m'a été utile. Merci! – kiewic

Questions connexes