Matthias Scharwies: ToDo JavaScript/URL/createObjectURL Idee mit Umsetzung

Beitrag lesen

Servus!

@@Samuel fiedler

Das Ergebnis ist aktuell ein Fiddle, prinzipiell fertig fürs Wiki.

Zuerst:

  1. Vielen Dank für Dein Beispiel!

  2. Herzlichen Glückwunsch zum Beispiele-Administrator.[1] (Du kannst jetzt Live-Beispiele hochladen. Hier gibt es mehr Informationen: Hilfe:Wiki/Beispiele)

Nein. Dieses Ding darf so auf keinen Fall ins Wiki.

Die Betonung liegt auf „so“

Erst müssen die Fehler ausgemerzt werden:

  • Sämtlichen Eingabefeldern fehlt die Beschriftung.

  • Man denkt, die Felder sind bereits beispielhaft vorausgefüllt. Sind sie aber nicht. placeholder ist so ziemlich das dümmste Feature in HTML. Nicht verwenden!

    Wenn die Felder vorausgefüllt sein sollen, dann mit value.

  • Der Download-Link führt initial zum aktuellen Dokument; href="" ist falsch. Er sollte, wenn’s nichts zum Herunterladen gibt, kein Link sein, d.h. das a-Element sollte kein href-Attribut haben.

    Dafür aber ein hidden-Attribut, und der Link wird erst angezeigt, wenn er sinnvoll ist. Also beim Setzen von link.href dann auch link.hidden = false setzen.

Ganz auf die Schnelle:

<form>
<label for="input_text">Inhalt</label>
<textarea id="input_text" width="80" height="25">Hallo Welt</textarea>

<label for="input_type">MIME-Typ</label>
<input type="text" id="input_type">

<label for="input_name">Vorgeschlagener Dateiname</label>
<input type="text" id="input_name" list="mime">
  <datalist id="mime">
        <option value="text/css"> 
        <option value="text/html"> 
        <option value="text/html"> 
        <option value="image/svg+xml"> 
  </datalist>

<button id="generate">Download-URL generieren</button>
<a hidden download="" id="download">Noch nichts</a>
</form>

Die br kann man weglassen und durch CSS formatieren!

Wenn man das mit erklärendem Begleittext im Wiki hat, kann man ja mal weitergucken.

Herzliche Grüße

Matthias Scharwies

--
Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!

  1. Das Standalone-SVG-Tutorial hat mir gut gefallen! ↩︎