Antworten auf deine Fragen:
Neues Thema erstellen

Eingabefeld Vorschau

aliasltb

aliasltb

LTB

Hey, ich hab mal wieder ne Frage.

Wie schafft man das, dass bei den Eingabefeldern eines Formulars eine Art Vorschau zu sehen ist.
Also z.B. im Eingabefeld, wo man die Email-Adresse eingeben soll, steht bereits Email drin, bis man darauf klickt. Dann soll "Email" verschwinden und der Eingabecursor normal erscheinen (z.B. wie bei studiVZ).

Wie ist das möglich? Wenn ja, geht das auch ohne Javascript? Und wenn nicht ohne, wie dann überhaupt? *g*

Danke schonmal im voraus. :)
 

MyBad

MyBad

localhorst

AW: Eingabefeld Vorschau

Also eine Möglichkeit ist javascript. Einfach beim input-Feld folgendes eintragen:
HTML: 
<input type="text" value="eMail" onclick="this.value=''" />

Ohne JS geht es auch. Dafür musst du dem input-Feld per css ein Hintergrund mit dem Text als Bild verpassen. Dieses kannst du dann per input:eek:nfocus{} wieder ausblenden. Diese Möglichkeit funzt aber nur in modernen Browsern. Der IE6 spielt da nicht mit, da er solche Events nur bei den a-Tags anerkennt.

Die beste Möglichkeit ist also die per JS (zumindest, wenn man den IE6 berücksichtigen möchte)
 
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

Ah cool danke. :)
Soweit geht das, aber wenn ich in das Eingabefeld klicke verschwindet der Text dann nicht.
Muss man das onclick darum erweitern?
 
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

Hm nope, tut sich nichts.

Achja, beim Passwortfeld erscheint gar nichts. Liegt das daran, dass es kein normales Textfeld ist?
 
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

PHP: 
 $form->addElement('password', 'password', array(//'label'=> 'Passwort:', 
             'size' => $size+2, 
             'class' => 'formular', 
             'value' => 'Passwort', 
             'onclick' => 'javascript:this.value'));

Bitte schön. ^^"
 
Chriss1987

Chriss1987

me.drinkCoffee();

AW: Eingabefeld Vorschau

Hi,

hier mal ein kleiner Vorschlag:
HTML: 
<script type="text/javascript">

function resetField (fieldid)
    {
        if (document.getElementById(fieldid) && document.getElementById(fieldid).value == document.getElementById(fieldid).defaultValue)
            {
                document.getElementById(fieldid).value = '';
            }
        else if (document.getElementById(fieldid) && document.getElementById(fieldid).value == "")
            {
                document.getElementById(fieldid).value = document.getElementById(fieldid).defaultValue;
            }
    }

</script>

<input type="text" id="i1" value="Bitte eMail eingeben..." onclick="resetField('i1');" onblur="resetField('i1');"><br>
<input type="text" id="i2" value="Bitte Name eingeben..." onclick="resetField('i2');" onblur="resetField('i2');"><br>
<input type="text" id="i3" value="Bitte Adresse eingeben..." onclick="resetField('i3');" onblur="resetField('i3');"><br>
<input type="text" id="i4" value="Bitte Nachricht eingeben..." onclick="resetField('i4');" onblur="resetField('i4');"><br>

So ist sichergestellt, dass eingegebene Daten beim erneuten Klick in das Feld nicht gelöscht werden!

Schöne Grüße aus dem Sauerland!
Chriss

Edit:
dann so (musst natürlich noch ne ID vergeben):
PHP: 
 $form->addElement('password', 'password', array(//'label'=> 'Passwort:', 
             'size' => $size+2, 
             'class' => 'formular', 
             'value' => 'Passwort', 
             'onclick' => 'resetField('i2');',
             'onblur' => 'resetField('i2');'));
 
Zuletzt bearbeitet:
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

PHP: 
if (document.getElementById(fieldid) && document.getElementById(fieldid).value == document.getElementById(fieldid).defaultValue)
            {
                document.getElementById(fieldid).value = '';
            }

An dieser Stelle sagt er mir "unexpected = ", also innerhalb der If-Anweisung.

Und wieso notierst du alle Variablen ohne $?
Führt das nicht zu Fehlern?
 
MyBad

MyBad

localhorst

AW: Eingabefeld Vorschau

aliasltb schrieb:
PHP: 
 $form->addElement('password', 'password', array(//'label'=> 'Passwort:', 
             'size' => $size+2, 
             'class' => 'formular', 
             'value' => 'Passwort', 
             'onclick' => 'javascript:this.value'));

Bitte schön. ^^"
Zum Vergrößern anklicken....

Mach es mal so:
PHP: 
 $form->addElement('password', 'password', array(//'label'=> 'Passwort:', 
             'size' => $size+2, 
             'class' => 'formular', 
             'value' => 'Passwort', 
             'onclick' => 'javascript:this.value=""'));

Wenn du es nicht so machst wie ich es beschreibe, kann es auch nicht funktionieren. Du musst das Value natürlich auch setzen!
 
MyBad

MyBad

localhorst

AW: Eingabefeld Vorschau

Ganz doofe Frage: Ist JavaScript bei dir aktiviert?

Du nutzt ja ein Framework. Welches ist das denn? Ich vermute mal, dass es nicht nötig ist innerhalb von "array()" noch einmal "value" zu füllen. Denn ich glaube das machst du ja bereits hier "$form->addElement('password', 'password' ..." mit dem zweiten "password". So kenne ich es zumindes von den meisten Frameworks.

Ander Möglichkeit: Ruf die Seite mal im Firefox auf und schau dir beim Click in das Feld mal die Fehlerkonsole an (Extras -> Fehlerkonsole). Sollte es ein JS-Fehler sein, wirst du dort eine Fehlermeldung finden.
 
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

Javascript ist aktiviert, sonst würde das gesamte Zend Framework gar nicht funktionieren. Und bei den Eingabefeldern "Benutzername" und "Email" funktioniert das ja, also da steht das entsprechende im jeweiligen Feld.
Nur bei Passwort gehts nicht.
 
MyBad

MyBad

localhorst

AW: Eingabefeld Vorschau

Was geht denn bei Passwort nicht? Meinst du, weil da nicht Passwort, sondern ****** drinsteht? Wenn du das meinst, wirst du da so nicht weiterkommen, denn ein input vom Typ "password" stellt den Inhalt immer mit Sternchen da...
 
Chriss1987

Chriss1987

me.drinkCoffee();

AW: Eingabefeld Vorschau

aliasltb schrieb:
PHP: 
if (document.getElementById(fieldid) && document.getElementById(fieldid).value == document.getElementById(fieldid).defaultValue)
            {
                document.getElementById(fieldid).value = '';
            }

An dieser Stelle sagt er mir "unexpected = ", also innerhalb der If-Anweisung.

Und wieso notierst du alle Variablen ohne $?
Führt das nicht zu Fehlern?
Zum Vergrößern anklicken....

Hi,

würde die IF-Abfrage im php-Code stehen, hättest du recht, bei JS ist dies für diese Abfrage nicht nötig! Deine Fehlermeldung sieht mir ganz danch aus, dass du das als php-Abfrage verwenden möchtest, der von mir gepostete Code ist allerdings JS!

Schöne Grüße aus dem Sauerland!
Chriss

// Edit:
hier eine Version mit PW-Feld
HTML: 
<script type="text/javascript">

function resetField (fieldid)
    {
        if (document.getElementById(fieldid) && document.getElementById(fieldid).value == document.getElementById(fieldid).defaultValue)
            {
                document.getElementById(fieldid).value = '';
            }
        else if (document.getElementById(fieldid) && document.getElementById(fieldid).value == "")
            {
                document.getElementById(fieldid).value = document.getElementById(fieldid).defaultValue;
            }
    }

function resetPasswordField (fieldid, fieldpwid)
    {
        if (document.getElementById(fieldid) && document.getElementById(fieldpwid).style.display == "none")
            {
                document.getElementById(fieldid).style.display = 'none';
                document.getElementById(fieldpwid).style.display = '';
                document.getElementById(fieldpwid).focus();
            }
        else if (document.getElementById(fieldpwid) && document.getElementById(fieldid).style.display == "none" && document.getElementById(fieldpwid).value == "")
            {
                document.getElementById(fieldid).style.display = '';
                document.getElementById(fieldpwid).style.display = 'none';
            }
    }

</script>

<input type="text" id="i1" value="Bitte eMail eingeben..." onclick="resetField('i1');" onblur="resetField('i1');"><br>
<input type="text" id="i2" value="Bitte Name eingeben..." onclick="resetField('i2');" onblur="resetField('i2');"><br>
<input type="text" id="i3" value="Bitte Adresse eingeben..." onclick="resetField('i3');" onblur="resetField('i3');"><br>
<input type="password" id="i4" value="" onclick="" onblur="resetPasswordField('i5', 'i4');" style="display: none;">
<input type="text" id="i5" value="Bitte PW eingeben..." onclick="resetPasswordField('i5', 'i4');"><br>
 
Zuletzt bearbeitet:
MyBad

MyBad

localhorst

AW: Eingabefeld Vorschau

So wie ich das verstehe möchte er schon, dass dort im Feld etwas drin steht, es bei einem Klick in selbiges aber leer gemacht wird. Allerdings scheint ja gar nichts angezeigt zu werden, trotz gefülltem "value"... das ist schon merkwürdig.

Ruf die Seite bitte mal in deinem Browser auf und poste den Quelltextbereich hier. Also den generierten HTML-Quelltext.
 
aliasltb

aliasltb

LTB

AW: Eingabefeld Vorschau

MyBad schrieb:
So wie ich das verstehe möchte er schon, dass dort im Feld etwas drin steht, es bei einem Klick in selbiges aber leer gemacht wird. Allerdings scheint ja gar nichts angezeigt zu werden, trotz gefülltem "value"... das ist schon merkwürdig.

Ruf die Seite bitte mal in deinem Browser auf und poste den Quelltextbereich hier. Also den generierten HTML-Quelltext.
Zum Vergrößern anklicken....


Genau wie MyBad es beschrieben hat soll es sein und ist auch mein Problem.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link type="text/css" rel="stylesheet" href="css/slide.css" /><link type="text/css" rel="stylesheet" href="css/basic.css" /> <script type="text/javascript" src="..\lib\swfobjects\swfobject.js"></script><script type="text/javascript"> var params = {			wmode: "transparent"		};swfobject.switchOffAutoHideShow();swfobject.embedSWF("swf/bg.swf", "wrap_bg", "2000px", "1400px", "9.0.0","lib/swfobject/expressInstall.swf","",params);</script><!--[if lte IE 6]>    <script type="text/javascript" src="lib/pngfix/supersleight-min.js"></script><![endif]--><script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script><script src="lib/slide.js" type="text/javascript"></script> <script type="text/javascript" charset="UTF-8"> /* <![CDATA[ */try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };xajax.config.requestURI = "http://192.168.4.43/www.mendens-meinung.de/";xajax.config.statusMessages = false;xajax.config.waitCursor = true;xajax.config.version = "xajax 0.5";xajax.config.legacy = false;xajax.config.defaultMode = "asynchronous";xajax.config.defaultMethod = "POST";/* ]]> */</script><script type="text/javascript" src="../lib/xajax/xajax_js/xajax_core.js" charset="UTF-8"></script><script type="text/javascript" charset="UTF-8"> /* <![CDATA[ */window.setTimeout( function() {  var scriptExists = false;  try { if (xajax.isLoaded) scriptExists = true; }  catch (e) {}  if (!scriptExists) {   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: ../lib/xajax/xajax_js/xajax_core.js");  } }, 2000);/* ]]> */</script> <script type='text/javascript' charset='UTF-8'> /* <![CDATA[ */xajax_login = function() { return xajax.request( { xjxfun: 'login' }, { parameters: arguments } ); };xajax_register = function() { return xajax.request( { xjxfun: 'register' }, { parameters: arguments } ); };/* ]]> */</script>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Mendens Meinung</title> </head><body> <!-- Panel --><div id="toppanel">	<div id="panel">		<div class="content clearfix">			<div class="left">				<h1>Mendens Meinung</h1>			</div>			<div class="left">				<!-- Login Form -->                <h1>Mitglieder Login</h1><div id="loginform"><form id="login" enctype="application/x-www-form-urlencoded" action="login.html" method="post"><dl class="zend_form"><dt id="username-label">&nbsp;</dt><dd id="username-element"><input type="text" name="username" id="username" value="Benutzername" size="32" class="formular" onclick='javascript:this.value=""'></dd><dt id="password-label">&nbsp;</dt><dd id="password-element"><input type="password" name="password" id="password" value="" size="34" class="formular" onclick='javascript:this.value=""'></dd><dt id="checkbox-label"><label for="checkbox" class="optional">Login-Daten merken</label></dt><dd id="checkbox-element"><input type="hidden" name="checkbox" value="0"><input type="checkbox" name="checkbox" id="checkbox" value="1" class="check"></dd><dt id="Anmelden-label">&nbsp;</dt><dd id="Anmelden-element"><button name="Anmelden" id="btn_log_bg" type="button" onclick="xajax_login(document.getElementById('username').value,document.getElementById('password').value);">Anmelden</button></dd></dl></form><a id="lostpw" href="">Passwort vergessen?</a></div>			</div>			<div class="left right">							<!-- Register Form -->                <h1>Noch kein Migtlied?</h1><div id="registerform"><form id="register" enctype="application/x-www-form-urlencoded" action="register.html" method="post"><dl class="zend_form"><dt id="username-label">&nbsp;</dt><dd id="username-element"><input type="text" name="username" id="username" value="Benutzername" size="32" class="formular" onclick='javascript:this.value=""'></dd><dt id="email-label">&nbsp;</dt><dd id="email-element"><input type="text" name="email" id="email" value="Email" size="32" class="formular" onclick='javascript:this.value=""'></dd><dt id="Registrieren-label">&nbsp;</dt><dd id="Registrieren-element"><button name="Registrieren" id="btn_reg_bg" type="button" onclick="xajax_register(document.getElementById('username').value,document.getElementById('email').value);">Registrieren</button></dd></dl></form><p id="sendpw">Ein Passwort wird an Ihre<br />Email-Adresse verschickt.</p></div>			</div>		</div>	</div> <!-- /login -->	     <!-- The tab on top -->		<div class="tab">		<ul class="login">	    	<li class="left">&nbsp;</li>	        <li>Willkommen!</li>			<li class="sep">|</li>			<li id="toggle">				<a id="open" class="open" href="#">Anmelden</a>				<a id="close" style="display: none;" class="close" href="#">Schlie&szlig;en</a>	</li>	    	<li class="right">&nbsp;</li>		</ul> 	</div> <!-- / top --></div> <!--panel --> <div id="wrap_bg">        <p>Bitte installieren Sie Adobe Flash Player oder aktualisieren Sie Ihre derzeitige Version!</p></div><div id="content">	<b>Willkommen!</b></div></body></html>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 73 (Mitglieder: 3, Gäste: 70)
Robots: 897

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben