So erstellen Sie Aktionen für ausgewählten Text mit der Auswahl -API

Klicken Sie auf, ziehen Sie, veröffentlichen Sie: Sie haben gerade einen Text auf einer Webseite ausgewählt - wahrscheinlich, um ihn irgendwo zu kopieren und einfügen oder zu teilen. Wäre es nicht cool, wenn die Auswahl dieses Textes einige Optionen enthüllt würde, die diese Aufgaben erleichtern? Das ist ein Auswahlmenü.

Möglicherweise sind Sie bereits mit Auswahlmenüs vertraut, wenn Sie jemals einen Online -Editor verwendet haben. Wenn Sie Text auswählen, kann die Auswahl über ihr geformt werden. Tatsächlich schreibe ich diesen Entwurf in einem Herausgeber, der genau das tut.

Lassen Sie uns sehen, wie wir mithilfe der Auswahl -API von JavaScript ein Auswahlmenü erstellen können. Die API bietet uns Zugriff auf den Raum und den Inhalt des ausgewählten Bereichs auf einer Webseite. Auf diese Weise können wir das Auswahlmenü genau über dem ausgewählten Text platzieren und auf den ausgewählten Text selbst zugreifen.

Hier ist ein HTML -Snippet mit einem Beispieltext:

 <artikels>
  <h1 id="Wählen-Sie-den-folgenden-Text-über"> Wählen Sie den folgenden Text über </h1> aus 
  <p> Cascading Style Sheets (CSS) ist eine Stylesheck -Sprache, die zur Beschreibung der Präsentation eines Dokuments, das in einer Markup -Sprache wie HTML geschrieben wurde, verwendet wird. CSS ist neben HTML und JavaScript eine Eckpfeiler -Technologie des World Wide Web. CSS wurde entwickelt, um die Trennung von Präsentation und Inhalten einschließlich Layout, Farben und Schriftarten zu ermöglichen. Diese Trennung kann die Zugänglichkeit in den Inhalten verbessern und mehr Flexibilität und Kontrolle in der Spezifikation der Präsentationsmerkmale bieten. </p>

<semplate> <span> </span> </semplate></artikels>

Am Ende gibt es dort ein Tag. Die im Inneren ist unser Auswahlmenü. Alles in einem -Tag wird auf der Seite erst dann gerendert , wenn es später mit JavaScript zur Seite hinzugefügt wird. Wir werden der Seite das Auswahlmenü hinzufügen, wenn der Benutzer Text auswählt. Und wenn der Benutzer diesen Text auswählt, fordert unser Auswahlmenü den Benutzer auf, ihn zu twittern.

Hier ist das CSS, um es zu stylen:

 #Kontrolle {
    Hintergrund-Image: URL ("Daten: Bild/SVG XML, <svg xmlns=" ​​http://www.w3.org/2000/svg " width="'40px'" height="'40px'"> <fremdobject width="'40px'" height="'40px'"> <divject xmlns="'http://www.w3.org/1999/xhtml'" style="'width:40px;height:40px;line-height:40px;text-align:center;color:transparent;text-shadow:" yellow black schwarz schriftgr>?  </divject></fremdobject> </svg> ");
  Cursor: Zeiger;
  Position: absolut;
  Breite: 40px;
  Höhe: 40px;
}
#Control :: vor {
  Hintergrundfarbe: Schwarz;
  Farbe: weiß;
  Inhalt: "Tweet das!";
  Anzeige: Block;
  Schriftgewicht: fett;
  Rand-Links: 37px;
  Rand: 6px;
  Polsterung: 2px;
  Breite: Max-Inhalt;
  Höhe: 20px;
}

Schauen Sie sich diesen Artikel an, um zu erfahren, wie ich ein Emoji (?) Für das Hintergrundbild verwendet habe.

Bisher ist der Beispieltext fertig und die Auswahlmenüsteuerung wurde gestylt. Gehen wir mit dem JavaScript weiter. Wenn eine Auswahl getroffen wird, erhalten wir die Größe und Position des ausgewählten Bereichs auf der Seite. Anschließend verwenden wir diese Messungen, um die Position des Auswahlmenüsteuerers an der oberen Mitte des ausgewählten Bereichs zuzuweisen.

 var Control = document.importnode (document.querySelector ('Vorlage'). Inhalt, true) .Childnodes [0];
document.querySelector ('p'). onPoInterup = () => {
  let Selection = document.getSelection (), text = selection.toString ();
  if (text! == "") {
    SET rect = selection.getRangeat (0) .GetBoundingClientRect ();
    control.style.top = `calc ($ {rect.top} px - 48px)`;
    control.style.left = `calc ($ {rect.left} px calc ($ {rect.width} px / 2) - 40px)`;
    steuern ['text'] = text; 
    document.body.Appendchild (Kontrolle);
  }
}

In diesem Code erhalten wir zunächst eine Kopie des Auswahlmenüsteuerers in und zuordnen sie dann der Steuervariablen zu.

Als nächstes schreiben wir die Handler -Funktion für das OnPoInterup -Ereignis des Elements, das den Beispieltext trägt. In der Funktion erhalten wir die Auswahl und die ausgewählte Zeichenfolge über document.getSelection (). Wenn die ausgewählte Zeichenfolge nicht leer ist, erhalten wir die Größe und Position des ausgewählten Bereichs über GetBoundingClientRect () und platzieren sie in die Richtvariable.

Mit Rect berechnen und zuweisen wir die oberen und linken Positionen der Steuerung. Auf diese Weise befindet sich die Auswahlmenüsteuerung etwas über dem ausgewählten Bereich und horizontal zentriert. Wir weisen die ausgewählte Zeichenfolge auch einer benutzerdefinierten Steuerungseigenschaft zu. Dies wird später verwendet, um den Text zu teilen.

Und schließlich fügen wir der Webseite mit appendChild () die Kontrolle über die Webseite hinzu. Wenn wir zu diesem Zeitpunkt einige der Beispieltext auf der Seite auswählen, wird das Auswahlmenü Steuerung auf dem Bildschirm angezeigt.

Jetzt können wir den Code machen, was passiert, wenn das Auswahlmenü -Steuerung klickt. Mit anderen Worten, wir machen es so, dass der Text getwittert wird, wenn die Eingabeaufforderung angeklickt wird.

 control.addeventListener ('pointerdown', onControldown, true);

Funktion OnControldown (Ereignis) {
  window.open (`https://twitter.com/intent/tweet?text=$ {this.text}`)
  this.remove ();
  document.getSelection (). removeallranges ();
  Event.StopPropagation ();
}

Wenn auf das Steuerelement geklickt wird, wird eine Registerkarte mit der Seite "New Tweet" von Twitter geöffnet, komplett mit dem ausgewählten Text.

Nach der Tweet -Eingabeaufforderung wird die Auswahlmenüsteuerung nicht mehr benötigt und entfernt, zusammen mit jeder auf der Seite getroffenen Auswahl. Die Art und Weise, wie das Zeigerereignis weiter unten im Dom -Baum kaskadiert, wird an diesem Punkt ebenfalls gestoppt.

Wir brauchen auch einen Event -Handler für das OnPointerdown -Ereignis der Seite:

 document.onpointerdown = () => {    
  let Control = document.querySelector ('#control');
  if (control! == null) {control.remove (); document.getSelection (). removeallranges ();}
}

Jetzt werden die Steuerung und jede Auswahl auf der Seite entfernt, wenn Sie auf der Seite überall auf der Seite klicken, aber das Auswahlmenü steuern.

Demo

Hier ist eine schönere Version, die Chris zusammengestellt hat:

Und hier ist ein Beispiel, das im Auswahlmenü mehr als eine Steuerung zeigt:

Über diese

Es ist nicht unbedingt notwendig, dass wir es benutzen. Stattdessen können Sie auch versuchen, einfach zu verstecken und die Steuerung auf andere Weise anzeigen, wie das versteckte HTML -Attribut oder die CSS -Anzeige. Sie können auch eine Auswahlmenüsteuerung im JavaScript selbst erstellen. Die Codierungsentscheidungen hängen davon ab, wie effizient Sie sie ausführen, und ihre Fallbacks, falls erforderlich, sowie wie sie zu Ihrer Anwendung passen.

Einige UI/UX -Ratschläge

Dies ist zwar ein guter Effekt, aber es gibt einige Dinge zu berücksichtigen, um eine gute Benutzererfahrung zu gewährleisten. Vermeiden Sie es beispielsweise nicht, Ihren eigenen Text in die Textauswahl zu injizieren. Es ist aufdringlich und nervig. Wenn es einen Grund gibt, dies zu tun, wie das Hinzufügen des Quellzitats, lassen Sie den Benutzer eine Vorschau des endgültigen Textes anzeigen, bevor Sie ihn veröffentlichen. Andernfalls kann der Benutzer von der Addition verwirrt oder überrascht sein.

Noch eine Sache: Es ist am besten, wenn die Menüsteuerung aus dem Weg ist. Wir wollen nicht, dass es zu viel von dem umgebenden Inhalt vertuscht. So etwas summiert sich zu CSS „Datenverlust“ und wir möchten das vermeiden.

Fazit: Verstehen Sie, warum Ihre Benutzer Text auf Ihrer Website auswählen und die Steuerelemente auf eine Weise hinzufügen müssen, die aus dem Weg räumen, was sie versuchen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Aktionen für ausgewählten Text mit der Auswahl -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!