2010-06-20 12 views
5

Wie Sie wissen, doppelklicken Sie auf ein Wort in einem Browser, wählen Sie es, Dreifachklick wählt den gesamten Absatz aus.HTML-Usability-Frage - (Doppelklick) zum Auswählen von Text

Ich bin zwicken ein Wiki, wo Unterschriften für anonyme Benutzer automatisch erstellt werden, und sie wie folgt aussehen:

--- // <ip.ad.dr.ess> //

Der " --- "erzeugt einen —, // ist für kursiven Text und erzeugt <em> </em >.

So funktioniert es jetzt, als ich es zwickte. Jetzt frage ich mich über die Benutzerfreundlichkeit.

Meine Frage ist: Wie man das Markup so erzeugt, dass bei einem Doppelklick auf die IP-Adresse die ganze Adresse und nur die Adresse ausgewählt wird?

Die Auszeichnungssprache spielt keine Rolle, Sie können eine Lösung in HTML bereitstellen, aber eine spezielle für Wikis (Dokuwiki) ist vorzuziehen.

Dank

+0

Dies ist sicherlich lösbar, aber die Lösung wird wahrscheinlich kompliziert sein. Wofür ist das? Wäre es vielleicht nicht einfacher, das Wiki zu ändern, damit der Inhalt nicht automatisch hinzugefügt wird? –

+0

Ich bin derjenige, der es optimiert, um diesen Inhalt hinzuzufügen. Es funktioniert, aber jetzt frage ich mich über die Erreichbarkeit – Flavius

+0

Was ist das für? Was meinst du mit Zugänglichkeit? –

Antwort

5

Danke an alle, aber ich habe es geschafft, indem ich ein readonly Textfeld ohne Grenzen und mit der Hintergrundfarbe des Hintergrunds der Website verwendet habe.

Doppelklicken funktioniert wie erwartet, ohne clientseitige Skripts zu verwenden.

2

Sie können das nicht mit HTML tun. Vielleicht mit Javascript. Grundsätzlich erkennen Sie nur Doppelklicks in einem bestimmten Bereich und wählen dann den entsprechenden Text aus.

EDIT:

Hier ist, wie es in der W3C-konformen Browser zu tun (zB Firefox, wird es wahrscheinlich in IE nicht funktionieren, die kein W3C-konformen Browser ist und verwendet verschiedene Textauswahl Modell):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 
    <head> 
     <script type="text/javascript"> 
      function select(elem) { 
       var sel = window.getSelection(); 
       var range = sel.getRangeAt(0); 
       range.selectNode(elem); 
       sel.addRange(range); 
      }    
     </script> 
    </head> 
    <body> 
     <p>a simple paragraph, this is 
      <span onclick="select(this);">clickable area</span> 
      when this 
      <span ondblclick="select(this);">span tag is double-clicked</span> 
      then they will be selected 
     </p> 
    </body> 
</html> 
+0

In der neuesten chrome, was ich als der erste Parameter der Funktion bekomme, ist das Ereignis, so ersetzt den Parameter mit 'e' und' elem' mit 'e.target' und es funktionierte wunderbar. – haridsv

+0

Laut der Dokumentation "Event" ist der erste Parameter tatsächlich das Ereignisobjekt selbst, nicht das Element. Siehe https://developer.mozilla.org/en/docs/Web/API/Event. Edit: Habe gerade gemerkt, dass du explizit 'this' als ersten Parameter übergibst. – haridsv

+0

@haridsv: das ist korrekt, wenn Sie den Ereignishandler mit addEventListener() verknüpfen. Wenn das Ereignis wie hier inline mit dem @ onclick-Attribut verknüpft ist, werden die Parameter durch alles bestimmt, was Sie an den Handler übergeben haben. In diesem Fall ist dies "this", was das Element ist. Heutzutage ist es wahrscheinlich eine bessere Methode, unauffällig mit addEventListener() oder mit jquery zu verknüpfen, anstatt sie an das onclick-Attribut anzuhängen. –