kostenloser Webspace werbefrei: lima-city

Bei Klick text in Textfeld einfügen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c*************h

   20:55, 24.2.2012

   Hallo,
   ich arbeite an einer Webseite in der man im Gästebuch Smileys einfügen kann.
   Da nicht alle wissen, was meine Abkürzungen sind, möchte ich, ein Feld einblenden, indem mann, wenn man auf einen Smiley klickt(die sind Bilddateien die in dem Kasten sein sollen) dieser an die Stelle, wo der Zeiger ist eingefügt wird.
   Wie kann ich das realisieren?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. askarian

   

   askarian hat kostenlosen Webspace.

   22:34, 24.2.2012

   Hi, ich kann dir das folgende Skript empfehlen:
   
   buttons.js:
   

   /* Skript von Torsten Anacker
   Erklärung: http://aktuell.de.selfhtml.org/tippstricks/javascript/bbcode/ */
   function insert(aTag, eTag) {
     var input = document.forms[0].elements[2];
     input.focus();
     /* für Internet Explorer */
     if(typeof document.selection != 'undefined') {
       /* Einfügen des Formatierungscodes */
       var range = document.selection.createRange();
       var insText = range.text;
       range.text = aTag + insText + eTag;
       /* Anpassen der Cursorposition */
       range = document.selection.createRange();
       if (insText.length == 0) {
         range.move('character', -eTag.length);
       } else {
         range.moveStart('character', aTag.length + insText.length + eTag.length);      
       }
       range.select();
     }
     /* für neuere auf Gecko basierende Browser */
     else if(typeof input.selectionStart != 'undefined')
     {
       /* Einfügen des Formatierungscodes */
       var start = input.selectionStart;
       var end = input.selectionEnd;
       var insText = input.value.substring(start, end);
       input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
       /* Anpassen der Cursorposition */
       var pos;
       if (insText.length == 0) {
         pos = start + aTag.length;
       } else {
         pos = start + aTag.length + insText.length + eTag.length;
       }
       input.selectionStart = pos;
       input.selectionEnd = pos;
     }
     /* für die übrigen Browser */
     else
     {
       /* Abfrage der Einfügeposition */
       var pos;
       var re = new RegExp('^[0-9]{0,3}$');
       while(!re.test(pos)) {
         pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
       }
       if(pos > input.value.length) {
         pos = input.value.length;
       }
       /* Einfügen des Formatierungscodes */
       var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
       input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
     }
   }

   
   
   Und edit.inc.php:
   

   // Buttons anzeigen
   $showbuttons = <<<BUTTONS
   <!-- Buttons durch Bilder darstellen -->
   <img src="forum/img/b.gif" onclick="insert('[b]','[/b]')" alt="Fett" title="Fett">
   <img src="forum/img/u.gif" onclick="insert('[u]','[/u]')" alt="Unterstrichen" title="Unterstrichen">
   <img src="forum/img/center.gif" onclick="insert('[center]','[/center]')" alt="mittig" title="mittig">
   <img src="forum/img/i.gif" onclick="insert('[i]','[/i]')" alt="Kursiv" title="Kursiv">
   <img src="forum/img/list.gif" onclick="insert('[list]','[/list]')" alt="umschlie&szlig;ende Liste" title="umschlie&szlig;ende Liste">
   <img src="forum/img/li.gif" onclick="insert('[li]','[/li]')" alt="Listenpunk" title="Listenpunkt">
   <img src="forum/img/font.gif" onclick="insert('[font=Arial]','[/font]')" alt="Schriftart" title="Schriftart">
   <img src="forum/img/color.gif" onclick="insert('[color=red]','[/color]')" alt="farbig" title="farbig">
   <img src="forum/img/size.gif" onclick="insert('[size=7]','[/size]')" alt="Gr&ouml;&szlig;e" title="Gr&ouml;&szlig;e">
   <!--<img src="forum/img/size.gif" onclick="insert('[img]news/img.png','[/img]')" alt="Image" title="Image">-->
   
   <img src="forum/img/link.gif" onclick="insert('[link]','[/link]')" 
   alt="Hyperlink (mit http://)" title= 
   	"Hyperlink (mit http://)"><br>
   BUTTONS;

   
   
   mit:
   

   echo $showbuttons;

   
   
   Werden dir dann die Bilder mit Skript angezeigt.
   
   Vergiss nicht die .js Datei einzubinden.
   
   UND: Ändere diese Zeile:
   

   var input = document.forms[0].elements[2];

   so wie du sie brauchst.
   
   askarian
4. Autor dieses Themas

   c*************h

   18:48, 1.3.2012

   Vielen Dank, hat mir sehr geholfen!!!!
   

5. anti-atomkraft

   

   anti-atomkraft hat kostenlosen Webspace.

   20:14, 1.3.2012

   Von mir auch ein Danke, da ich sowas auch schon gesucht habe, vor allem im IE hab' ich da diesbezüglich noch nichts zum Laufen gekriegt... Direkt ein Lesezeichen gesetzt; teste ich, wenn ich es wieder brauche... xD

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?