2010-10-19 16 views
12

jaki jest najlepszy sposób zrobienia tego w jQuery? Powinno to być dość powszechnym przypadkiem użycia.Zastąpienie zaznaczonego tekstu w textarea

  1. Użytkownik wybiera tekst w textarea
  2. On kliknie na link
  3. tekst w linku zastępuje zaznaczony tekst w textarea

Każdy kod będzie bardzo cenione - Jestem mając problemy z częścią 3.

+0

Właściwości 'selectionStart' i' selectionEnd' swojego 'textarea' lub' input' to wszystko czego potrzebujesz dzisiaj. Połącz to z metodą 'slice' na wartości elementu wejściowego. – caw

Odpowiedz

16

Oto, jak możesz to zrobić we wszystkich głównych przeglądarkach. Mam także jQuery plug-in, która obejmuje tę funkcję. Z tym, kod byłoby

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

Oto pełna autonomicznym rozwiązanie:

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

To będzie niesamowicie przydatna wtyczka. Dziękuję bardzo! To trochę dziwne, jak ten przypadek użycia nie jest jeszcze objęty. Próbowałem pisać własne, ale trafiłem w tak wiele dziwek przeglądarki. ;) –

+0

replaceSelectedText - jedynym problemem, jaki widzę, jest to, że w IE, gdy nic nie jest zaznaczone, kursor przechodzi do przodu, w przeciwieństwie do końca. w każdym razie, które można naprawić? –

+0

W zamieszczonym tutaj kodzie lub wtyczce jQuery? W tym miejscu kod nie próbuje zmienić położenia selekcji, ze względu na zwięzłość. Wtyczka jQuery powinna sobie z tym poradzić. –

Powiązane problemy