Text auf einem Button unsichbar machen

[Tim Büthe]

Hallo,

ich möchte Text auf einem Button (input type=submit) unsichtbar machen. Ich brauch das, weil der Button ein bestimmtes value haben muss, da die  aufgerufene Seite dieses abfragt. Wenn ich das value setze erscheint es aber natürlich auf dem Knopf als text (was ich nicht will). Es ist auch keine Option, den Text in der Hintergrundfarbe des Buttons darzustellen, da der Button ein Hintergrundbild hat.

Meine Idee war den Text mit negativem padding aus dem sichtbaren Bereich zu schieben, die Angabe wird aber ignoriert:

mybutton.style.paddingTop = "-100px";

Gibt's da einen Weg?

Danke, gruß,
Tim

[Gunnar Bittersmann]

Hello out there!

ich möchte Text auf einem Button (input type=submit) unsichtbar machen.

Und für den Nutzer soll ein unbeschrifteter Button sinnvoll sein? Weiß er denn, warum er da drauf clicken sollte?

<[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit" value="foo"></button>

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

<[ref:self812;html/formulare/klickbuttons.htm#modern@title=button] type="submit" value="foo"></button>

Alte IEs sind dafür untauglich; sie lesen 'value' falsch aus.

See ya up the road,
Gunnar

[Matze]

Hallo,

http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern@title=button

Wozu brauch man solche Buttons wenn man sie nur in Verbindung mit einem Event-Handler benutzen kann?
Einen <input type="submit"...> kann ich per CSS auch relativ großzügig gestalten und ich weiß vorher, dass es auch mit deaktiviertem JavaScript funktioniert.

Nicht umsonst steht dazu unten:

"Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf."

Ich frag mich irgendwie eher, warum er nicht gleich den ganzen Button ausblendet.
Wie erwähnt ist ein leerer Button ziemlich irritierend und ich würde ihn nicht drücken.

Grüße, Matze

[Tim Büthe]

Hallo,

danke für die Antworten. Ich habe es nicht ausführlich genug erklärt. Es muss ein input type=submit sein, den button möchte ich nicht verwenden. Das liegt daran das es sich um eine bestehende Seite handelt (die nicht von mir ist), die ich per JavaScript ändern muss. Ich hatte auch schon versucht das komplette Element auszutauschen, das hat aber das Verhalten der Seite geändert und ich hatte Probleme mit dem IE, weil er den Button und das value anderes interpretiert.

Ich habe weiter gesucht und herausgefunden, dass man den guten alten input-submit-button mit Hilfe von CSS auch ganz gut stylen kann. Also nutze ich JavaScript um dem Button ein Icon zu geben. Ich tausche die Beschriftung also gegen ein Icon aus (also statt "abschicken" möchte ich beispielsweise mein okay.png als Hintergrund). Da die aufgerufene Seite aber nicht funktioniert wenn ich value="" mache, weil dieses explizit abgefragt wird (auch nicht von mir) muss ich ein Value setzen, möchte den Text aber nicht anzeigen.

Auf padding mit einem negativen Wert bin ich gekommen, weil ich sowas schon bei Background-Position gesehen habe, da ist das wohl möglich.

Ich hoffe jetzt ist klar geworden was ich brauche. Fällt euch da was ein?

Gruß,
Tim

Hallo,

http://de.selfhtml.org/html/formulare/klickbuttons.htm#modern@title=button

Wozu brauch man solche Buttons wenn man sie nur in Verbindung mit einem Event-Handler benutzen kann?
Einen <input type="submit"...> kann ich per CSS auch relativ großzügig gestalten und ich weiß vorher, dass es auch mit deaktiviertem JavaScript funktioniert.

Nicht umsonst steht dazu unten:

"Ohne JavaScript sind sie komplett funktionslos, und sie treten deshalb in der Realität äußerst selten auf."

Ich frag mich irgendwie eher, warum er nicht gleich den ganzen Button ausblendet.
Wie erwähnt ist ein leerer Button ziemlich irritierend und ich würde ihn nicht drücken.

Grüße, Matze

[Matze]

Hallo,

Fällt euch da was ein?

Ja, vermeide TOFU ;)

Grüße, Matze

[Tim Büthe]

Hallo,

Hi,

Fällt euch da was ein?

Ja, vermeide TOFU ;)

jo, danke. Der Artikel sieht interessant und ich gelobe Besserung, aber das hilft bei meinem Button-Problem nicht, wa?

Grüße, Matze

Gruß,
Tim

[Matze]

Hallo,

jo, danke. Der Artikel sieht interessant und ich gelobe Besserung, aber das hilft bei meinem Button-Problem nicht, wa?

Nicht wirklich ;) Aber ok

Es muss ein input type=submit sein, den button möchte ich nicht verwenden.

Und wenn du den Button einfach ausblendest? Also display:none; visibility:invisible;(?)

Ich hatte auch schon versucht das komplette Element auszutauschen, das hat aber das Verhalten der Seite geändert und ich hatte Probleme mit dem IE, weil er den Button und das value anderes interpretiert.

Was hat sich denn geändert? Hast du vielleicht einen Link?
Und wieso interpretiert der IE value="" anders? Doch nur bei <button>, nicht bei <input>, oder?

Da die aufgerufene Seite aber nicht funktioniert wenn ich value="" mache, weil dieses explizit abgefragt wird (auch nicht von mir) muss ich ein Value setzen, möchte den Text aber nicht anzeigen.

"Funktioniert nicht" gibt es nicht!
Was soll passieren und was passiert stattdessen? Fehlermeldungen?
"ein" Value setzen? Also ist egal was da steht? Auch ein Leerzeichen?
Oder ein unauffälliger Punkt in Schriftgröße 1px?

Ich hoffe jetzt ist klar geworden was ich brauche.

Zumindest versuch ich zu verstehen^^

Grüße, Matze

[Tim Büthe]

Es muss ein input type=submit sein, den button möchte ich nicht verwenden.

Und wenn du den Button einfach ausblendest? Also display:none; visibility:invisible;(?)

und dann? Ich möchte den Button mit Text gegen einen Button mit Icon austauschen. Den Button gänzlich ausblenden ist kein Problem...

Da die aufgerufene Seite aber nicht funktioniert wenn ich value="" mache, weil dieses explizit abgefragt wird (auch nicht von mir) muss ich ein Value setzen, möchte den Text aber nicht anzeigen.

"Funktioniert nicht" gibt es nicht!
Was soll passieren und was passiert stattdessen? Fehlermeldungen?
"ein" Value setzen? Also ist egal was da steht? Auch ein Leerzeichen?

die Seite, es ist eine JSP hat da ungefähr folgende Bedingung stehen:

if(request.getParameter("meinButton") != null &&
   request.getParameter("meinButton").trim().length() > 0){

tueWas();
 }

deshalb funktioniert's in diesem Fall wirklich nicht und wegen des Aufrufs von trim() kann man auch keine Leerzeichen verwenden.

Oder ein unauffälliger Punkt in Schriftgröße 1px?

naja, Perfekt ist das nicht. Wenn man als Neu-Icon ein weißes Blatt hat, und dieses 16x16 Pixel groß ist, sieht man einen ein Pixel großen Punkt trotzdem.

Ich hoffe jetzt ist klar geworden was ich brauche.

Zumindest versuch ich zu verstehen^^

das ist sehr löblich und ich danke Dir für deine Geduld :)

[Matze]

Hallo,

du stellst meine Geduld grad ernsthaft auf die Probe.

Du willst einen Button nicht verwenden aber dann doch....
und dann muss es auch noch ein input, kein button, sein ja?!

Wie wär es wenn du "&& request.getParameter("meinButton").trim().length() > 0){"
 einfach entfernst? Dann kannst du da rein haun was du willst.

Im Prinzip kennst du die Lösung doch.

Grüße, Matze

[Tim Büthe]

du stellst meine Geduld grad ernsthaft auf die Probe.

ich habe auch schon ein ganz schlechtes Gewissen.

Du willst einen Button nicht verwenden aber dann doch....

klar will ich den Button verwenden, ich will nur den Text darauf ausblenden.

und dann muss es auch noch ein input, kein button, sein ja?!

richtig, hier nochmal die Rahmenbedingungen:

• input type=submit
• kein (neuer) button
• ich will keine andere Seite bearbeiten und
• nur JavaScript verwenden

Im Prinzip kennst du die Lösung doch.

ich kenn' da eine Menge Lösungen, aber keine die mit den o.g. Rahmenbedingungen funktioniert/entspricht. Aber es ist kein Problem wenn Du auch keine Lösung kennst, dann sag's einfach (hoffe das spornt Deinen Ehrgeiz an :))

Grüße

Tim

[Matze]

Hallo,

Aber es ist kein Problem wenn Du auch keine Lösung kennst, dann sag's einfach (hoffe das spornt Deinen Ehrgeiz an :))

Ich dachte ich hätte dir die Lösung genannt?!
Entferne einfach die Abfrage nach Leerzeichen und füge dann ein Leerzeichen als Value für den Input-Button.

Grüße, Matze

[Tim Büthe]

Ich dachte ich hätte dir die Lösung genannt?!
Entferne einfach die Abfrage nach Leerzeichen und füge dann ein Leerzeichen als Value für den Input-Button.

das ist klar, aber leider sehr viel aufwändiger als eine zentrale Javascript-Lösung. Es geht nämlich nicht um eine aufgerufene Seite, sondern um hunderte, die ich dann alle testen müsste... Wie auch immer, ich werde mal weiter forschen. Danke für Deine Geduld und Hilfe.

Gruß,
Tim

[donp]

Hallo,

Es ist nur ein submit-Button ohne Eventhandler dran?

Dann hilft Trick17:
Gib ihm den value, den er haben muss, und mach' das ganze Ding unsichtbar. Daneben setzt du dann einen weiteren submit-button ohne value, der das Aussehen hat, das du willst.

Zum Abschicken ohne Eventhandler ist es ja egal, welcher Button das letztlich bewerkstelligt. Auch mit Eventhandler müsste es ähnlich gehen.

Gruß, donp

[donp]

Hallo,

Es ist nur ein submit-Button  ohne Eventhandler dran?
Dann gib ihm doch den value, den er haben muss, und mach' das ganze Ding unsichtbar. Daneben setzt du dann einen weiteren submit-button ohne value, der das Aussehen hat, das du willst.

Zum Abschicken ohne Eventhandler ist es ja egal, welcher Button das letztlich bewerkstelligt.

Gruß, donp