Ergebnis 1 bis 3 von 3

Thema: Wie benutzt man das Clipboard unter JavaScript?

  1. #1
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard Wie benutzt man das Clipboard unter JavaScript?

    Durch Kommentar von bandit, jetzt auch noch hier:

    Gestern stieß ich auf ein kleines Problem:

    Ich schreibe an einem WYSIWYG-Editor. Die Eingabe funktioniert rein über JavaScript. Aber: Wie kann ich eine Paste-Funktion einbauen?
    JavaScript ist auf den Browser begrenzt. Das Clipboard (Strg + C; Strg + V) geht darüber hinaus und ist wegen Sicherheitsgründen für JavaScript gesperrt.
    Aber wie greife ich jetzt darauf zu?

    Nach kurzem Nachdenken fiel mir ein, dass Textfelder Strg + V unterstützen. Also entschied ich mich, dieses zu "missbrauchen"

    Vorbereitung

    Die Funktion des WYSIWYG-Editors benutzt folgende HTML-Struktur:

    HTML-Code:
    <div class="WYSIWYG_Area">
        <div id="WYSIWYG_test" class="WYSIWYG_Editor" onclick="WYSIWYG_Activate_Editor()">
        </div>
        <form>
            <textarea id="WYSIWYG_Paste_Area" class="WYSIWYG_Paste_Area" />
        </form>
    </div>
    Genauer möchte ich nicht darauf eingehen: Die Grundfunktion ist einfach: Bei einem Klick wird der DIV "aktiviert". Und alle Eingaben werden im Hintergrund berechnet und in den DIV geschrieben.

    Die Funktion benötigt 3 Dateien:
    HTML-Code:
        <script type="text/javascript" src="js.php"></script>
        <script type="text/javascript" src="WYSIWYG.js"></script>
        <link type="text/css" rel="stylesheet" href="WYSIWYG.css" />
    Die Browserweichen

    Die einfachste ist js.php:
    Code:
    <?php
    
        header('Content-type:text/javascript');
    
        $IEVersion = false;
        if(eregi("(msie) ([0-9]{1,2}.[0-9]{1,3})",$_SERVER['HTTP_USER_AGENT'],$regs) )
        {
            $IEVersion = "MSIE $regs[2]";
            $IEVersion = substr($IEVersion,0,6);
        }
        $user_agent = strtoupper($_SERVER['HTTP_USER_AGENT']);
        if(strpos($user_agent,'MSIE')!==false)
            $browser = 'Internet Explorer';
        else if(strpos($user_agent,'SAFARI')!==false)
            $browser = 'Safari';
        else if(strpos($user_agent,'FIREFOX')!==false)
            $browser = 'Firefox';
        else if(strpos($user_agent,'OPERA')!==false)
            $browser = 'Opera';
        else if(strpos($user_agent,'LYNX')!==false)
            $browser = 'Lynx';
        else if(strpos($user_agent,'WEBTV')!==false)
            $browser = 'WebTV';
        else if(strpos($user_agent,'KONQUEROR')!==false)
            $browser = 'Konqueror';
        else if((strpos($user_agent,'NAV')!==false) || (strpos($user_agent,'X11')!==false) || (strpos($user_agent,'GOLD')!==false) || (strpos($user_agent,'MOZILLA')!==false) || (strpos($user_agent,'NETSCAPE')!==false))
            $browser = 'Netscape Navigator';
        else
            $browser = 'Anderer';
    
        echo "browser = '".$browser."';";
    
    ?>
    Dieses PHP-Script liest einfach den Browser aus und gibt ihn an JS weiter.

    Der Style

    Der Style wird in WYSIWYG.css definiert:
    Code:
    div.WYSIWYG_Area
    {
        position:relative;
        padding:0px;
        margin:0px;
    }
    
    div.WYSIWYG_Editor
    {
        .....
        width:500px;
        height:400px;
        position:absolute;
        top:0px;
        left:0px;
        z-index:999;
    }
    
    ...
    
    div.WYSIWYG_Paste_Area
    {
           position:absolute;
        top:2px;
        left:2px;
        width:1px;
        height:1px;
        z-index:5;
    }
    Diese Script versteckt die Textarea hinter dem DIV. Der DIV ist größer und liegt im z-index über der Textarea. Sie sind über "position:absolute;" hintereinander positioniert.

    Die eigentliche Funktion

    Im folgenden Script wird nun die eigentliche Funktion ausgeführt. Ich behandle jedoch nur die Paste-Funktion. Die Browserweichen würden den Rahmen hier sprengen. Die Funktion so funktioniert in Firefox.

    Zuerst müssen die Texteingaben verarbeitet werden:
    Code:
    document.onkeypress = WYSIWYG_Enter_Key;
    Jeder Testendruck runft nun WYSIWYG_Enter_Key() auf. Die Funktion sieht so aus:
    Code:
    function WYSIWYG_Enter_Key(e)
    {
        if(!e)
            e = window.event;
        if(e.charCode != 0)
            var code = e.charCode;
        else
            var code = e.keyCode;
        if(e.ctrlKey)
        {
            if(WYSIWYG_Key_Array[ code ] && (code == 86 || code == 118))
            {
                document.getElementById("WYSIWYG__Paste_Area").focus();
                window.setTimeout('WYSIWYG_Get_Paste();', 50);
            }
        }
        return true;
    }
    Hier wird abgefragt, ob die Steuerungstaste (e.ctrlKey) und V abgefragt. Siend diese beiden Tasten gedrückt, wird das (versteckte) textfeld aktiviert und ein Timer von 50 ms gestartet. Nach dieser Zeit wird folgende Funktion aufgerufen:
    Code:
    function WYSIWYG_Get_Paste()
    {
        WYSIWYG_appendText(document.getElementById("WYSIWYG_Paste_Area").value);
            document.getElementById("WYSIWYG_Paste_Area").value = "";
        document.getElementById("WYSIWYG_Paste_Area").blur();
    }
    Nach den 50 ms wird einfach der Inhalt dieses Textfeldes abgefragt und mittels WYSIWYG_appendText() (oder einer anderen Funktion ) verarbeitet.
    Dann wird der Inhalt gelöscht und das Textfeld deaktiviert.

    So, das war meine neueste kranke Programmier-Erfahrung.
    Ich hoffe, sie wird irgendjemandem, der dies liest helfen.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Dodo (11.01.2010 um 19:39 Uhr)
    Something big is coming. And there will be pirates and ninjas and unicorns...

  2. #2
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Wie benutzt man das Clipboard unter JavaScript?

    Wenn ich mich nicht irre, gits auch den Eventhandler "oncopynpaste" (oder so ). Damit könntest du das so regeln:
    HTML-Code:
    <body oncopynpaste="focusiere_paste_textarea_dann_schreibe_text_in_Editor();">
    Bin mir aber echt nicht sicher. Coole sache, das Skript.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  3. #3
    Jedi Ritter
    Themenstarter
    Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Wie benutzt man das Clipboard unter JavaScript?

    ich hab mich grad ein bisschen erkundet.
    es gibt nen handler für textfelder "onpaste" ("onbeforepaste").
    Aber der ist nur unter IE verfügbar
    Something big is coming. And there will be pirates and ninjas and unicorns...

Ähnliche Themen

  1. javascript:location unter firefox hilfe
    Von hgw-guy im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.09.2008, 11:16
  2. Was benutzt ihr für ein Designprog??
    Von Lucas im Forum Off Topic und Quasselbox
    Antworten: 18
    Letzter Beitrag: 15.06.2007, 13:54
  3. javascript unter body tag
    Von hups im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 15.02.2007, 13:45
  4. Homepage unter Firefox OK unter IExplorer tut nichts
    Von Highlander im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 20.09.2005, 09:31
  5. was benutzt ihr?
    Von robbus6666 im Forum HTML & CSS Forum
    Antworten: 29
    Letzter Beitrag: 22.06.2005, 19:12

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •