Icon in input feld

Dieses Thema im Forum "Webentwicklung" wurde erstellt von leex, 14. Oktober 2013 .

Schlagworte:
  1. 14. Oktober 2013
    Hallo,
    ich würde gerne beim click auf ein icon dieses in ein textfeld einfügen.

    habe es mit jquery $("#input").append("background", "url(test.jpg)"); versucht, hat aber nicht geklappt.

    lässt sich das einfach mit jquery lösen?
     
  2. 14. Oktober 2013
    AW: Icon in input feld

    Lies dir bitte die API von jQuery durch!
    Warum benutzt du append?
     
  3. 14. Oktober 2013
    AW: Icon in input feld

    weil ich das symbol immer an den text anhängen möchte.
    Wie sollte ich es denn richtig machen?
     
  4. 14. Oktober 2013
    AW: Icon in input feld

    val ist zum Setzen und Holen des inhaltes von Input-, Select- und Textarea-Elementen.

    Code:
    var text = 'Hinzugefügt',
     $input = $("#input");
    $input.val($input.val()+text);
     
  5. 14. Oktober 2013
    AW: Icon in input feld

    ich will aber ja ein bild und keinen text einfügen. das müsste ja dann so irgendwie gehen:
    Code:
    $(document).ready(function(){
     
     $('#bild').click(function(){ 
     var bild = "<img src=test.jpg>";
     $input = $("#input");
     $input.val($input.val()+bild);
     }); 
     
     });
     
  6. 14. Oktober 2013
    AW: Icon in input feld

    Dir ist hoffentlich klar das in einem Input-Feld nur Text dargestellt werden kann oder?
     
  7. 14. Oktober 2013
    Zuletzt bearbeitet: 14. Oktober 2013
    AW: Icon in input feld

    Hm. Gibt es keine Möglichkeit das irgendwie zu bewerkstelligen?! Andere Methode?!

    geht darum sowas hier zu erstellen:
    Funschild Konfigurator

    nur eben nicht wie gutschild mit einem bild das per php erzeugt wird sondern direkt.
     
  8. 14. Oktober 2013
    AW: Icon in input feld

    Auf der Seite werden Platzhalter im Text z.b. ": ::" benutzt die vom Server "übersetzt" werden.
    Das gleiche kannst du auch mit Javascript machen und die Platzhalter mit IMG-Tags austauschen und als HTML in ein DIV schreiben.

    Code:
    <!DOCTYPE html>
    <html>
     <head>
     <meta charset="utf-8">
     <title>Test</title>
     </head>
     <body>
     <div id="preview"></div>
    
     <script>
     var text = 'Hallo ::test::';
     var html = text.replace('::test::','<img src="test.jpg">');
     $('#preview').html(html);
     </script>
     </body>
    </html>
    
     
  9. 15. Oktober 2013
    AW: Icon in input feld

    cool. und das funktioniert auch mit allen browsern oder?
     
  10. 15. Oktober 2013
    AW: Icon in input feld

    Murdoc benutzt ein Div das er wie ein typisches Input-Element aussehen lässt und gibt ihm ContentEditable als Attribute das dafür sorgt das man Inhalt Bearbeiten kann wie auch in einem Textfeld bei dem du allerdings sämtliche HTML-Elemente zur Verfügung hast.

    Die Unterstützung von ContentEditable ist sehr hoch, also kannst du diese Methode problemlos verwenden.
     
  11. 15. Oktober 2013
    AW: Icon in input feld

    super. das hab ich gesucht ... vielen dank an euch beide
     
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.