2010-10-19 10 views
12

Quelle est la meilleure façon de procéder dans jQuery? Cela devrait être un cas d'utilisation assez commun.Remplacer le texte sélectionné dans la zone de texte

  1. L'utilisateur sélectionne du texte dans une zone de texte
  2. Il clique sur un lien
  3. Le texte du lien remplace le texte sélectionné dans la zone de texte

Tout code sera très apprécié - je suis avoir quelques problèmes avec la partie 3.

+0

Les propriétés '' selectionStart' et selectionEnd' de votre '' textarea' ou input' est tout ce que vous avez besoin aujourd'hui. Combinez cela avec la méthode 'slice' sur la valeur de l'élément d'entrée. – caw

Répondre

16

Voici comment vous pouvez le faire, dans tous les principaux navigateurs. J'ai aussi un jQuery plug-in qui inclut cette fonctionnalité. Avec cela, le code serait

$("your_textarea_id").replaceSelectedText("NEW TEXT"); 

Voici une solution complète autonome:

function getInputSelection(el) { 
    var start = 0, end = 0, normalizedValue, range, 
     textInputRange, len, endRange; 

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     start = el.selectionStart; 
     end = el.selectionEnd; 
    } else { 
     range = document.selection.createRange(); 

     if (range && range.parentElement() == el) { 
      len = el.value.length; 
      normalizedValue = el.value.replace(/\r\n/g, "\n"); 

      // Create a working TextRange that lives only in the input 
      textInputRange = el.createTextRange(); 
      textInputRange.moveToBookmark(range.getBookmark()); 

      // Check if the start and end of the selection are at the very end 
      // of the input, since moveStart/moveEnd doesn't return what we want 
      // in those cases 
      endRange = el.createTextRange(); 
      endRange.collapse(false); 

      if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { 
       start = end = len; 
      } else { 
       start = -textInputRange.moveStart("character", -len); 
       start += normalizedValue.slice(0, start).split("\n").length - 1; 

       if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { 
        end = len; 
       } else { 
        end = -textInputRange.moveEnd("character", -len); 
        end += normalizedValue.slice(0, end).split("\n").length - 1; 
       } 
      } 
     } 
    } 

    return { 
     start: start, 
     end: end 
    }; 
} 

function replaceSelectedText(el, text) { 
    var sel = getInputSelection(el), val = el.value; 
    el.value = val.slice(0, sel.start) + text + val.slice(sel.end); 
} 

var el = document.getElementById("your_textarea"); 
replaceSelectedText(el, "[NEW TEXT]"); 
+0

Ce sera un plugin incroyablement utile. Merci beaucoup! C'est un peu bizarre comment ce cas d'utilisation n'est pas encore couvert. J'ai essayé d'écrire le mien, mais j'ai rencontré tant de bizarreries de navigateur. ;) –

+0

replaceSelectedText - le seul problème que je vois avec ceci est que dans IE, quand rien n'est sélectionné, le curseur va à l'avant, par opposition à la fin. de toute façon qui peut être réparé? –

+0

Dans le code affiché ici ou le plugin jQuery? Le code ici ne tente pas de repositionner la sélection par la suite, par souci de brièveté. Le plugin jQuery devrait gérer cela. –

Questions connexes