[Erledigt] show/hide eines Buttons nach focus auf Textarea

Crusher · 19.04.2011, 13:24

Hallo liebe Community,

da ich mich privat und beruflich nun etwas mehr dem Thema PHP, html, javascript, usw. befassen möchte bzw. muss,
habe ich mich entschlossen mich in diesem Forum anzumelden und hoffe bei Problemen hier Lösungen, bzw. Anstöße in die richtige Richtung zu finden.
Desweiteren hoffe ich natürlich, dass ich selbst (irgendwann mal) bei Problemen helfen kann.

Ich hab auch gleich ein Problem (wer hätte das gedacht? ^^), in welches ich schon einiges an Zeit investiert habe aber leider steh ich immernoch total aufm Schlauch.

Ich möchte:
Beim Anklicken eines Textareas, dass mittels Javascript ein Button sichtbar gemacht wird.
Dies funktioniert auch ohne Probleme.

Mein Problem:
Wenn ich nun aber auf den Button klicken möchte verschwindet dieser durch das onblur-event vom Textarea.

Ich hoffe Ihr könnt mir bei diesem kleinen Problem helfen

Hier mein Testcode:

PHP-Code:

  <?php

    if (isset($_POST['submit'])) {

        echo $_POST['submit'];

    }

?>

 
<html>

    <head>

        <link rel="stylesheet" type="text/css" href="style.css"></link>

        

        <script type="text/javascript">

            function setCSS(button, textarea) {

                button.className = (button.className == 'visible')?'hidden':'visible';

            }

            function checkJavascript() {

                elements = document.getElementsByName("submit");

                count = elements.length;

                for (var x=0; x<count; x++) {

                    elements[x].className = 'hidden';

                }

            }

 
        </script>

            

        <noscript>

            Kein Javascript aktiviert

        </noscript>

    </head>

    <body onload="checkJavascript();">

        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

            <?php 

                for($x=1; $x <= $num=2; $x++) {

                    echo "<textarea id=\"text$x\" name=\"text$x\" rows=\"1\" cols=\"20\" onFocus=\"setCSS(document.getElementById('button$x'), document.getElementById('text$x'));\" onblur=\"setCSS(document.getElementById('button$x'), document.getElementById('text$x'));\"></textarea>" . 

                         "<input id=\"button$x\" class=\"visible\" type=\"submit\" name=\"submit\" value=\"submit$x\"></input><br>";

                }

            ?>

        </form>

    </body>

</html>

und mein style.css

Code:

textarea { 
	color: #999; 
	font-size: 13px; 
  	font-weight: bold; 
}

textarea:focus, textarea:active { 
	color: #000; 
	width: 200px;
  	height: 50px;
}

.visible {
	visibility:visible;	
}

.hidden {
	visibility:hidden;
}

Manko10 · 19.04.2011, 13:29

Dein Thread-Titel ist schlecht bzw. unglücklich gewählt. Bitte ändere diesen und beachte dabei Bitte aussagekräftige Threadtitel verwenden

Du musst den Status des Buttons irgendwo speichern. Sich allein auf onfocus und onblur zu verlasssen klappt natürlich nicht.

ChrisB · 19.04.2011, 13:29

Zitat:

Zitat von Crusher

Mein Problem:
Wenn ich nun aber auf den Button klicken möchte verschwindet dieser durch das onblur-event vom Textarea.

Dann verzichte darauf, durch den Blur-Event der Textarea den Button auszublenden, wenn das nicht das ist, was du möchtest.

Und wenn es „so einfach nicht ist“ - dann beschreibe bitte detailierter, was du genau möchtest.

Und poste bitte, wenn du ein clientseitiges Problem diskutieren möchtest, auch nur clientseitigen Code - serverseitiger (PHP-)Code ist dabei nicht hilfreich, sondern macht das ganze u.U. nur unklarer.

Crusher · 19.04.2011, 13:47

Zitat:

Zitat von Manko10

Dein Thread-Titel ist schlecht bzw. unglücklich gewählt. Bitte ändere diesen und beachte dabei Bitte aussagekräftige Threadtitel verwenden

Hmm, gleich mein erster Fauxpas.
Ein guter Einstieg in eine Forenkarriere sieht wohl anders aus.

Ich bitte um Entschuldigung und hoffe das der jetzt gewählte Titel besser passt.

Zitat:

Zitat von ChrisB

Dann verzichte darauf, durch den Blur-Event der Textarea den Button auszublenden, wenn das nicht das ist, was du möchtest.

Und wenn es „so einfach nicht ist“ - dann beschreibe bitte detailierter, was du genau möchtest.

Beim klicken in das Textareafeld soll der Button sichtbar werden und
beim klicken außerhalb des Textareafeldes, soll der Button wieder versteckt werden (deswegen nutze ich z.Zt. dort das onBlur-event).
Wenn ich, wie du gesagt hast, auf das Event verzichte, dann würde der Button, bei einem Klick außerhalb des Feldes, ja weiterhin angezeigt werden und das soll nicht der Fall sein.

Zitat:

Zitat von ChrisB

Und poste bitte, wenn du ein clientseitiges Problem diskutieren möchtest, auch nur clientseitigen Code - serverseitiger (PHP-)Code ist dabei nicht hilfreich, sondern macht das ganze u.U. nur unklarer.

Ich dachte mir, dass dies für eventuelle Testzwecke hilfreich sein könnte.
Werd aber nächstes Mal versuchen mich an deinen Hinweis zu halten

ChrisB · 19.04.2011, 14:12

Zitat:

Zitat von Crusher

Beim klicken in das Textareafeld soll der Button sichtbar werden und
beim klicken außerhalb des Textareafeldes, soll der Button wieder versteckt werden

Nein, das soll er eben offenbar nicht - zumindest nicht pauschal.

Um dieses Problem zu lösen, ist es also erst mal erforderlich, es in genau diesem Punkt klarer zu formulieren/spezifizieren.

Definiere also die Fälle, in denen er beim „Klicken außerhalb der Textarea“ wieder versteckt werden soll, und in welchen nicht.
Wie es aussieht, sind das erst mal genau zwei Fälle, die unterschieden werden möchten. Nachdem diese formuliert sind, kann es daran gehen zu überlegen, wie diese Unterscheidung getroffen werden kann.

Crusher · 19.04.2011, 14:20

Fall 1) Der Button wird wieder versteckt,
sobald der Focus nicht mehr auf dem Textarea liegt.
(Ausnahme Fall 2)

Fall 2) Der Button wird nicht versteckt,
wenn der Focus auf dem Button liegt

nikosch · 19.04.2011, 14:33

Zitat:

Zitat von Crusher

Fall 1) Der Button wird wieder versteckt,
sobald der Focus nicht mehr auf dem Textarea liegt.
(Ausnahme Fall 2)

Fall 2) Der Button wird nicht versteckt,
wenn der Focus auf dem Button liegt

Dieses Verhalten macht doch ohne weitere Erklärung überhaupt keinen Sinn.

ChrisB · 19.04.2011, 14:40

Zitat:

Zitat von Crusher

Fall 1) Der Button wird wieder versteckt,
sobald der Focus nicht mehr auf dem Textarea liegt.
(Ausnahme Fall 2)

Fall 2) Der Button wird nicht versteckt,
wenn der Focus auf dem Button liegt

Das ist jetzt aus Anwender-Sicht formuliert.
Wir sind aber nicht der Anwender, sondern der Programmierer, der das umsetzen soll

Außerdem sind bei deiner Formulierung die Fälle nicht unabhängig voneinander, sondern der zweite schränkt den ersten ein - das erschwert ihre Betrachtung.

Generell günstiger wäre es, erst mal so zu formulieren:

Fall 1)
Ist-Zustand: Button ist sichtbar.
Eintretendes Ereignis: Textarea verliert den Fokus durch Klick auf irgendetwas anderes als den Button.
Gewünschtes Ergebnis: Button wird wieder versteckt.

Fall 2)
Ist-Zustand: Button ist sichtbar.
Eintretendes Ereignis: Textarea verliert den Fokus durch Klick auf den Button.
Gewünschtes Ergebnis: Button soll sichtbar bleiben. (Bzw. alternativ formuliert: Es soll gar keine Reaktion auf das Ereignis stattfinden.)

Diese Fälle sind „unabhängig“ von einander, und es ist auch sehr leicht erkennbar, was sie unterscheidet: Wohin der Klick, der zum Fokusverlust der Textarea führt, ist das interessante und entscheidende Kriterium, welches also in der Implementierung des ganzen gesonderte Betrachtung erfordert.

Leider gibt es für den Blur-Event keine Information darüber, wodurch der Fokusverlust ausgelöst wurde.
Also muss eine Möglichkeit gefunden werden, beim Reagieren auf den Klick- oder Fokus-Event des Buttons zu verhindern, dass dieser versteckt wird.
Das wird dadurch erschwert, dass diese Events aber erst nach dem Blur-Event der Textarea feuern.

Eine denkbare Möglichkeit wäre, beim Blur-Event der Textarea den Button nicht augenblicklich zu verstecken, sondern dies durch einen Timeout zu verzögern. Wenn kurz danach der Klick- oder Fokus-Event auf dem Button eintritt, könnte dieser Timeout dann wieder gelöscht werden.

nikosch · 19.04.2011, 14:59

Ich verstehe überhaupt nicht den Sinn dieses Verhaltens. Das zu beschreiben wäre mal praktisch.

Crusher · 19.04.2011, 15:54

@ChrisB: Vielen Dank, mit setTimeout() funktioniert es nun

War ja doch ne schwere Geburt... und ich dachte eigentlich ich hätte mich bei der Problemstellung am Anfang klar ausgedrückt, naja so schnell kann man sich irren

Zitat:

Zitat von nikosch

Ich verstehe überhaupt nicht den Sinn dieses Verhaltens. Das zu beschreiben wäre mal praktisch.

Der Sinn dahinter ist der,
dass der Button wirklich erst angezeigt werden soll,
wenn der Anwender das Textareafeld ausgewählt hat.

In meinem "Privatprojekt" kann es vorkommen, dass auf einer Seite z.B. 20 Textareas zu sehen sind (und dann soll es auch 20 Buttons geben)
warum sollten dann alle Buttons angezeigt werden?

Ich finde, wenn nur der relevante Button (also der zu dem ausgewählten Textarea) angezeigt wird, dann wirkt alles etwas übersichtlicher

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Problem mit dynamischer URL in Javascript Dateien	da.eXecutoR	JavaScript, Ajax und mehr	4	28.09.2010 17:18
[Erledigt] Problem mit Zeile löschen Tabelle Javascript	nBassCom	JavaScript, Ajax und mehr	2	02.06.2010 14:36
[Erledigt] CSS und Javascript Dropdown Menu IE PROBLEM	unreal87	HTML, Usability und Barrierefreiheit	3	19.05.2010 19:20
Problem mit GB Smily javascript / <form>	lordcyphon	JavaScript, Ajax und mehr	4	10.11.2009 15:40
Javascript Cookie Problem	scheffie	JavaScript, Ajax und mehr	14	19.07.2009 05:07
Problem mit einbindung von javascript auf einer php seite	mysteryxxx	PHP Tipps 2009	7	01.02.2009 16:40
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
Problem: javascript + verstecken eines Divs	se-clan	HTML, Usability und Barrierefreiheit	4	04.01.2007 10:49
problem mit javascript und smarty	snatch-ic	HTML, Usability und Barrierefreiheit	2	08.06.2006 22:11
JavaScript Problem	2wuck	HTML, Usability und Barrierefreiheit	3	02.01.2006 14:15
Problem mit Javascript: lässt sich nicht auslagern	blinkster.de	HTML, Usability und Barrierefreiheit	2	01.10.2005 15:20
Problem mit Javascript in PHP		PHP Tipps 2005-2	3	19.09.2005 00:49
[Erledigt] Problem mit Javascript		HTML, Usability und Barrierefreiheit	21	16.09.2005 19:50
JavaScript Problem IE		HTML, Usability und Barrierefreiheit	5	30.07.2005 16:50
propertie problem in javascript		HTML, Usability und Barrierefreiheit	1	07.11.2004 14:15

19.04.2011, 13:24
Crusher Neuer Benutzer Registriert seit: 19.04.2011 Beiträge: 10 PHP-Kenntnisse: Anfänger	[Erledigt] show/hide eines Buttons nach focus auf Textarea Hallo liebe Community, da ich mich privat und beruflich nun etwas mehr dem Thema PHP, html, javascript, usw. befassen möchte bzw. muss, habe ich mich entschlossen mich in diesem Forum anzumelden und hoffe bei Problemen hier Lösungen, bzw. Anstöße in die richtige Richtung zu finden. Desweiteren hoffe ich natürlich, dass ich selbst (irgendwann mal) bei Problemen helfen kann. Ich hab auch gleich ein Problem (wer hätte das gedacht? ^^), in welches ich schon einiges an Zeit investiert habe aber leider steh ich immernoch total aufm Schlauch. Ich möchte: Beim Anklicken eines Textareas, dass mittels Javascript ein Button sichtbar gemacht wird. Dies funktioniert auch ohne Probleme. Mein Problem: Wenn ich nun aber auf den Button klicken möchte verschwindet dieser durch das onblur-event vom Textarea. Ich hoffe Ihr könnt mir bei diesem kleinen Problem helfen Hier mein Testcode: PHP-Code: <?php if (isset($_POST['submit'])) { echo $_POST['submit']; } ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"></link> <script type="text/javascript"> function setCSS(button, textarea) { button.className = (button.className == 'visible')?'hidden':'visible'; } function checkJavascript() { elements = document.getElementsByName("submit"); count = elements.length; for (var x=0; x<count; x++) { elements[x].className = 'hidden'; } } </script> <noscript> Kein Javascript aktiviert </noscript> </head> <body onload="checkJavascript();"> <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post"> <?php for($x=1; $x <= $num=2; $x++) { echo "<textarea id=\"text$x\" name=\"text$x\" rows=\"1\" cols=\"20\" onFocus=\"setCSS(document.getElementById('button$x'), document.getElementById('text$x'));\" onblur=\"setCSS(document.getElementById('button$x'), document.getElementById('text$x'));\"></textarea>" . "<input id=\"button$x\" class=\"visible\" type=\"submit\" name=\"submit\" value=\"submit$x\"></input><br>"; } ?> </form> </body> </html> und mein style.css Code: textarea { color: #999; font-size: 13px; font-weight: bold; } textarea:focus, textarea:active { color: #000; width: 200px; height: 50px; } .visible { visibility:visible; } .hidden { visibility:hidden; } Geändert von Crusher (19.04.2011 um 13:37 Uhr). Grund: ungünstige Titelwahl


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

19.04.2011, 13:29
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	Dein Thread-Titel ist schlecht bzw. unglücklich gewählt. Bitte ändere diesen und beachte dabei Bitte aussagekräftige Threadtitel verwenden Du musst den Status des Buttons irgendwo speichern. Sich allein auf onfocus und onblur zu verlasssen klappt natürlich nicht. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

19.04.2011, 14:20
Crusher Neuer Benutzer Registriert seit: 19.04.2011 Beiträge: 10 PHP-Kenntnisse: Anfänger	Fall 1) Der Button wird wieder versteckt, sobald der Focus nicht mehr auf dem Textarea liegt. (Ausnahme Fall 2) Fall 2) Der Button wird nicht versteckt, wenn der Focus auf dem Button liegt

19.04.2011, 14:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ich verstehe überhaupt nicht den Sinn dieses Verhaltens. Das zu beschreiben wäre mal praktisch. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --