Wie zu ausgewähltem Text aus Textbox-Steuerelement mit Javascript bekommen

StackOverflow https://stackoverflow.com/questions/275761

Frage

Ich habe eine Textbox und eine Link-Taste. Wenn ich einen Text schreiben, dann wählen einige von ihnen und dann auf den Link klicken, müssen ausgewählten Text aus Textbox Show mit einem messagebox.

Wie kann ich es tun?

Wenn ich auf die Schaltfläche für Textbox unten einreichen klicken, müssen Meldungsfeld Lorem ipsum zeigen. Denn "Lorem ipsum" im Bereich ausgewählt.

Wenn ich einen Text von der Seite aus und klicken Sie den Absenden-Button es funktioniert, aber wenn ich einen Text schreiben Sie es auf Textfeld und zu machen, ist es nicht. Denn wenn ich in einem anderen Raum klicken, wird Auswahl der Textbox abgebrochen.

Jetzt Problem ist, dass, wenn ich einen Text aus Textfeld auswählen und auf andere Steuerung oder Raum, Text, der ausgewählt wird, muss noch ausgewählt werden.

Wie es gemacht werden?

War es hilfreich?

Lösung

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)
  {// IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

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

Problem, obwohl der Code, den ich für IE geben auf vielen Seiten gegeben ist, kann ich es nicht auf meiner Kopie von IE6 auf meinem aktuellen System arbeiten. Vielleicht wird es für Sie arbeiten, das ist, warum ich es geben.
Der Trick Sie suchen ist wahrscheinlich die .focus () -Aufruf, zurück zu geben, um den Fokus auf TextArea- so wird die Auswahl wieder aktiviert.

[UPDATE] Ich habe das richtige Ergebnis (die Auswahl Inhalt) mit onKeyDown Ereignisse: 

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

So ist der Code korrekt. Auch hier ist das Problem die Auswahl auf Klick auf einen Button zu bekommen ... ich weiter suchen.

[UPDATE] Ich habe keinen Erfolg mit einem Knopf mit einem li Tag gezogen, weil, wenn wir darauf klicken, abgewählt IE die vorherige Auswahl. Der obige Code funktioniert mit einer einfachen input Taste, obwohl ...

Andere Tipps

Hier ist eine viel einfachere Lösung, basierend auf der Tatsache, dass die Textauswahl auf mouseup auftritt, also fügen wir einen Ereignis-Listener für das: 

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 auch die Auswahl über die Tastatur zu handhaben mögen, fügen Sie einen anderen Ereignis-Listener für keyup, mit dem gleichen Code.

Wenn es nicht für diese Firefox Fehler waren wieder eingereicht 2001 (ja, vor 14 Jahren), konnten wir den Wert ersetzen mit window.mySelection window.getSelection().toString() zugeordnet, die in IE9 + und allen modernen Browsern funktioniert und bekommt auch die in nicht-Textbereich Teile des DOM getroffenen Auswahl. 

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

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 Sie nur einen Verweis auf ein Textfeld Element übergeben (wie ein Textfeld oder Eingabeelement) an die Funktion: 

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

Oder, wenn Sie wollen