So erhalten Sie ausgewählten Text aus einem Textfeld-Steuerelement mit JavaScript

Lesezeit: 6 Minuten

Benutzer-Avatar
mavera

Ich habe ein Textfeld und einen Link-Button. Wenn ich einen Text schreibe, einen Teil davon auswähle und dann auf die Link-Schaltfläche klicke, muss der ausgewählte Text aus dem Textfeld mit einem Meldungsfeld angezeigt werden.

Wie kann ich es tun?

Wenn ich auf die Schaltfläche „Senden“ für das Textfeld unten klicke, muss das Meldungsfeld angezeigt werden Lorem ipsum. Denn im Bereich ist „Lorem ipsum“ angewählt.

Wenn ich einen beliebigen Text auf der Seite auswähle und auf die Schaltfläche „Senden“ klicke, funktioniert es, aber wenn ich einen Text in das Textfeld schreibe und ihn erstelle, funktioniert es nicht. Denn wenn ich auf ein anderes Leerzeichen klicke, wird die Auswahl des Textfelds abgebrochen.

Das Problem ist nun, dass, wenn ich Text aus dem Textfeld auswähle und auf ein anderes Steuerelement oder Leerzeichen klicke, der ausgewählte Text immer noch ausgewählt sein muss.

Wie ist es zu tun?

Benutzer-Avatar
Philho

OK, hier ist der Code, den ich habe:

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  { // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  { // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

Das Problem ist, obwohl der Code, den ich für Internet Explorer gebe, auf vielen Seiten angegeben ist, kann ich ihn auf meiner Kopie nicht zum Laufen bringen InternetExplorer 6 auf meinem jetzigen System. Vielleicht funktioniert es für Sie, und deshalb gebe ich es.

Der Trick, nach dem Sie suchen, ist wahrscheinlich der Aufruf von .focus(), um den Fokus wieder auf das Textfeld zu geben, damit die Auswahl reaktiviert wird.

Ich habe das richtige Ergebnis (die Auswahl Inhalt) mit dem onKeyDown Veranstaltung:

document.onkeydown = function (e) { ShowSelection(); }

Der Code ist also richtig. Auch hier geht es darum, die Auswahl per Klick auf eine Schaltfläche zu erhalten … Ich suche weiter.

Mit einem mit a gezeichneten Button hatte ich keinen Erfolg li -Tag, denn wenn wir darauf klicken, hebt der Internet Explorer die vorherige Auswahl auf. Der obige Code funktioniert mit einer einfachen input knopf aber…

  • 8 Jahre alter Beitrag, ich weiß. Aber trotzdem … vielleicht hätten Sie es versuchen können: Klicken Sie auf Ihrer Schaltfläche auf call $(‘‘).focus() und rufen Sie dann ShowSelection() auf, das den Teil aus dem aktiven Element erhält?

    – Krishnan

    21. Mai 2014 um 9:10 Uhr

  • Das geht viel einfacher.

    – Dan Dascalescu

    4. September 2015 um 11:38 Uhr

Benutzer-Avatar
Dan Dascalescu

Hier ist eine viel einfachere Lösung, basierend auf der Tatsache, dass die Textauswahl beim Mouseup erfolgt, also fügen wir dafür einen Ereignis-Listener hinzu:

document.querySelector('textarea').addEventListener('mouseup', function () {
  window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd)
  // window.getSelection().toString();
});
<textarea>
  Select some text
</textarea>
<a href="#" onclick=alert(mySelection);>Click here to display the selected text</a>

Dies funktioniert in allen Browsern.

Wenn Sie die Auswahl auch über die Tastatur vornehmen möchten, fügen Sie einen weiteren Ereignis-Listener für hinzu keyupmit dem gleichen Code.

Wenn da nicht dieser Firefox-Fehler wäre, der 2001 (ja, vor 14 Jahren) eingereicht wurde, könnten wir den zugewiesenen Wert ersetzen window.mySelection mit window.getSelection().toString()das in IE9+ und allen modernen Browsern funktioniert, und erhält auch die Auswahl, die in Nicht-Textarea-Teilen des DOM vorgenommen wird.

  • Sie kritisieren also Lösungen, die vor sieben Jahren gegeben wurden, ohne anzugeben, dass Sie in IE < 9 * nicht funktionieren ... :-) OK, das ist gut, um das Thema mit einer modernen Lösung zu aktualisieren, aber vergessen Sie nicht, dass sich manche Leute um ältere kümmern Browser. * developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

    – Philho

    4. September 2015 um 14:11 Uhr

  • @PhiLho: Es ist verblüffend, dass es in FF nicht funktioniert – der Fehler dafür wurde vor 14 Jahren eingereicht. Aktualisierte Antwort.

    – Dan Dascalescu

    5. September 2015 um 19:30 Uhr

  • Diese Lösung funktioniert gut, aber wenn der Cursor aus dem Textfeld “Box” herausgeht, wird das Ereignis nicht ausgelöst. Sie müssen den folgenden Code hinzufügen, damit es in diesem Fall funktioniert: document.querySelector(‘textarea’).addEventListener(‘mouseleave’, function () { window.mySelection = this.value.substring(this.selectionStart, this.selectionEnd ); }); Das Ereignis wird dann auch ausgelöst, wenn Sie den Textbereich verlassen, wodurch Ihre Auswahl erhalten bleibt.

    – Darxtar

    9. Oktober 2016 um 0:15 Uhr

  • Maus? Funktioniert es, wenn die Tastatur zur Auswahl verwendet wird? Können Sie das in Ihrer Antwort ansprechen?

    – Peter Mortensen

    9. Mai um 2:39 Uhr

Benutzer-Avatar
prat3ik-patel

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert
}
<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

  • Dies funktioniert, aber wenn Sie komplizierteren Code hatten disp()zu dem Zeitpunkt, als dieser Code die Auswahl aus dem Textbereich erhielt (z. B. beim Erstellen einer Auswahlmenüder Browser hat es möglicherweise gelöscht, weil die click Ereignis, das auf der Schaltfläche auftritt, bedeutet, dass der Textbereich a erhält verwischen Ereignis, das die Auswahl löscht. Meine Antwort adressiert das, indem die Auswahl in einer Variablen gespeichert wird, wenn sie auftritt.

    – Dan Dascalescu

    5. September 2015 um 19:49 Uhr

Benutzer-Avatar
Schatten2531

Für Opera, Firefox und Safari können Sie die folgende Funktion verwenden:

function getTextFieldSelection(textField) {
    return textField.value.substring(textField.selectionStart, textField.selectionEnd);
}

Dann übergeben Sie einfach einen Verweis auf ein Textfeldelement (wie ein Textfeld oder ein Eingabeelement) an die Funktion:

alert(getTextFieldSelection(document.getElementsByTagName("textarea")[0]));

Oder, wenn Sie möchten, dass