Eingabefeld mit verschwindendem Vorgabetext

[Ogi]

Hallo zusammen,

konnte das in selfhtml nicht finden - aber ich sehs immer wieder im netz: wie mach ich das, das ich eine einzeiliges eingabefeld habe, in dem ein vorgefertigter text (value) steht, der aber dann, sobald man reinklickt, um zu schreiben, verschwindet, so dass der cursor ganz am anfang steht?

danke,

o.

[Anton]

konnte das in selfhtml nicht finden - aber ich sehs immer wieder im netz: wie mach ich das, das ich eine einzeiliges eingabefeld habe, in dem ein vorgefertigter text (value) steht, der aber dann, sobald man reinklickt, um zu schreiben, verschwindet, so dass der cursor ganz am anfang steht?

einfach:

function leeren()
{
 document.inputfeld.value='';
}

<input name='inputfeld' onfocus="javascript:leeren" value='Hier klicken'>

Denke so müsste das gehen, das würde aber bei jedem reinklicken passieren. Musste noch eine if reintun:

function leeren()
{
  if(document.inputfeld.value=='Hier klicken')
  {
   document.inputfeld.value='';
  }
}

Müsste so gehen...

Gruß

Anton

[Anton]

Ups Fehler:

<input name='inputfeld' onfocus="javascript:leeren" value='Hier klicken'>

<input name='inputfeld' onfocus="javascript:leeren();" value='Hier klicken'>

Gruß

Anton

[Der Martin]

Hallo,

Ups Fehler:
<input name='inputfeld' onfocus="javascript:leeren();" value='Hier klicken'>

noch'n "Fehler": Was soll das Label "javascript:" hier? Möchtest du diese Stelle jemals mit einem goto-Befehl anspringen, den es in Javascript gar nicht gibt? Na also. Dann brauchst du auch keine Sprungmarke zu setzen.

Übrigens ist die Methode, einen Dummy-Text in das Feld zu schreiben, ziemlich lästig für Benutzer, die kein Javascript nutzen können/wollen. Da verschwindet nämlich der sinnlose Vorgabetext nicht, und man muss ihn von Hand löschen. Wenn der Zweck des Eingabefeldes so schwer zu erraten ist, dass man einen solchen banalen (und meist nichtssagenden) Vorgabetext hineinschreiben muss, hat der Entwickler irgendwas gehörig falsch gemacht.

Was mich bei solchen Beschreibungen auch immer wieder irritiert: Das ist doch ein *Textfeld*, ich erwarte also, dass ich die Tastatur benutzen muss, um etwas hineinzuschreiben. Und warum soll ich dann erst in das Feld *klicken*, anstatt, wie es sich eigentlich anbietet, mit der Tastatur dorthin zu navigieren?

Ciao,
 Martin

[Anton]

Jo, wer die Welt nur so, wie man es sich wünscht.

[Ingo Turski]

Hi,

Übrigens ist die Methode, einen Dummy-Text in das Feld zu schreiben, ziemlich lästig für Benutzer, die kein Javascript nutzen können/wollen. Da verschwindet nämlich der sinnlose Vorgabetext nicht, und man muss ihn von Hand löschen. Wenn der Zweck des Eingabefeldes so schwer zu erraten ist, dass man einen solchen banalen (und meist nichtssagenden) Vorgabetext hineinschreiben muss, hat der Entwickler irgendwas gehörig falsch gemacht.

Das stimmt zwar, aber unter dem Gesichtspunkt der Barrierefreiheit wird das noch gefordert: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

freundliche Grüße
Ingo

[Der Martin]

Hallo Ingo,

Das stimmt zwar, aber unter dem Gesichtspunkt der Barrierefreiheit wird das noch gefordert: http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-specific

ich widerspreche:
Erstens beginnt dieser Absatz mit "Until user agents handle empty controls correctly", was auf alle zeitgemäßen, mir bekannten Browser zutrifft.
Zweitens würde ich das nur dann als einen Gewinn an Usability betrachten, wenn beim Focussieren des Eingabefeldes der bisherige Feldinhalt automatisch auch selektiert wird, wie es in den Controls des GUI außerhalb des Browsers üblich ist, so dass der Vorgabetext beim ersten eingegebenen Zeichen gelöscht wird. Das tun die Browser IIRC eben nicht, und damit ist ein Vorgabetext eher ein Ärgernis als eine Hilfe.

So long,
 Martin

[Ingo Turski]

Hi,

ich widerspreche:
Erstens beginnt dieser Absatz mit "Until user agents handle empty controls correctly", was auf alle zeitgemäßen, mir bekannten Browser zutrifft.

Auch auf Lynx und einige exotische Vorleseprogramme? Denn um die geht es ja hier. Können die tatsächlich alle das label-Element für das dazugehörige Eingabefeld vorlesen?

Zweitens würde ich das nur dann als einen Gewinn an Usability betrachten, wenn beim Focussieren des Eingabefeldes der bisherige Feldinhalt automatisch auch selektiert wird, wie es in den Controls des GUI außerhalb des Browsers üblich ist, so dass der Vorgabetext beim ersten eingegebenen Zeichen gelöscht wird. Das tun die Browser IIRC eben nicht

das stimmt zwar leider, aber der Komfortverlust dürfte dennoch geringer sein, als wenn ein spezieller User Agent ein leeres Feld ohne Beschreibung anbietet.

freundliche Grüße
Ingo

[at]

Hallo.

Zweitens würde ich das nur dann als einen Gewinn an Usability betrachten, wenn beim Focussieren des Eingabefeldes der bisherige Feldinhalt automatisch auch selektiert wird, wie es in den Controls des GUI außerhalb des Browsers üblich ist, so dass der Vorgabetext beim ersten eingegebenen Zeichen gelöscht wird.

Die von mir und einigen anderen hier eingesetzte GUI handhabt das seit jeher anders als von dir beschrieben, was ich persönlich auch sehr schätze. Dass sich die gängigen Browser dahingehend konsistent verhalten, hatte ich daher immer als Selbstverständlichkeit angesehen.
MfG, at

[Der Martin]

Moin,

Die von mir und einigen anderen hier eingesetzte GUI handhabt das seit jeher anders als von dir beschrieben, was ich persönlich auch sehr schätze.

was meinst du damit? Dass es bei Linux-GUIs nicht üblich ist, dass der Feldinhalt beim Anwählen auch selektiert wird? Das habe ich bei Bekannten a) unter SUSE und b) unter Fedora aber schon anders erlebt: Die verhielten sich auch wie es bei Windows üblich ist. Beim Focussieren eines Eingabefeldes wird dessen Inhalt auch automatisch selektiert.

Dass sich die gängigen Browser dahingehend konsistent verhalten, hatte ich daher immer als Selbstverständlichkeit angesehen.

Ist es aber offensichtlich nicht. Nach dieser Anspielung von dir habe ich das Verhalten von Internet Explorer und Firefox unter Windows in diesem Punkt nochmal untersucht (Opera hatte ich momentan nicht zur Hand). Ergebnis: Beide verhalten sich gleich. Und zwar gleichermaßen inkonsequent.

In einzeiligen Textfeldern (input type="text") wird der Feldinhalt selektiert, wie man das erwartet. In Ordnung.
In mehrzeiligen Textfeldern (textarea) wird der Feldinhalt *nicht* selektiert, der Cursor wird hinter den Defaulttext gesetzt. Für mich nicht nachvollziehbar, aber akzeptabel.

Wird ein Eingabefeld aber per Javascript-Anweisung focussiert, dann wird der Feldinhalt *grundsätzlich* nicht automatisch selektiert, auch nicht bei einzeiligen Textfeldern, und der Cursor wird *vor* den Defaulttext gesetzt. Das finde ich absolut unlogisch, und es ist besonders lästig bei vorbelegten Feldern in Formularen, die mit JS den Focus aufs erste Eingabefeld setzen. Dann muss man nämlich tatsächlich erst den Feldinhalt von Hand löschen.

Fröhliches Schwitzen,
 Martin

[at]

Hallo.

Die von mir und einigen anderen hier eingesetzte GUI handhabt das seit jeher anders als von dir beschrieben, was ich persönlich auch sehr schätze.

was meinst du damit? Dass es bei Linux-GUIs nicht üblich ist, dass der Feldinhalt beim Anwählen auch selektiert wird?

Wie das innerhalb der gängigen Benutzeroberflächen unter Linux gehandhabt wird, weiß ich nicht, aber meine GUI macht es offebar anders als deine.

Dass sich die gängigen Browser dahingehend konsistent verhalten, hatte ich daher immer als Selbstverständlichkeit angesehen.

Ist es aber offensichtlich nicht.

Ist es aber offensichtlich doch. Ich habe es eben selbst getestet.

In einzeiligen Textfeldern (input type="text") wird der Feldinhalt selektiert, wie man das erwartet.

Bei mir nicht -- wie ich es erwarte.

In Ordnung.

Yep.

In mehrzeiligen Textfeldern (textarea) wird der Feldinhalt *nicht* selektiert, der Cursor wird hinter den Defaulttext gesetzt. Für mich nicht nachvollziehbar, aber akzeptabel.

Das geschieht bei mir auch, und das ist dann bei mir konsistent.
MfG, at

[Cybaer]

Hi,

einfach:

Einfacher & richtiger:

onFocus="if(this.value==this.defaultValue) { this.value=''; }

Gruß, Cybaer